CSS. UMLV / F. Petit 1. Styles CSS. Feuilles de styles en cascade Cascading Style Sheets. Versions/niveaux (level) de CSS

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

Download "CSS. UMLV / F. Petit 1. Styles CSS. Feuilles de styles en cascade Cascading Style Sheets. Versions/niveaux (level) de CSS"

Transcription

1 Versions/niveaux (level) de CSS Styles CSS Feuilles de styles en cascade Cascading Style Sheets CSS-1 ou CSS level 1 (1996, révisé en 1999) : CSS-P (CSS Positioning) CSS-2 ou CSS level 2 (1998) CSS-2.1 (révision 2006) CSS-3 : brouillons (drafts) CSS Mobile Profile 1.0 CSS Print Profile CSS TV Profile 1.0 Florence Petit 26 février HTML 3.2 : exemple (répétition des attributs) HTML 4 avec CSS : exemple <body bgcolor="white"> <h1 align="center">titre 1</h1> <p> <font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 1</b></i></font></p> <p><font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 2</b></i></font></p> <h1 align="center">titre 2</h1> <p><font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 3</b></i></font></p> <h1 align="center">titre 3</h1> body {background-color: white; h1 {text-align: center; p {color:red; font: italic bold 1em Arial, Helvetica; <h1>titre 1</h1> <p>mon texte 1</p> <p>mon texte 2</p> <h1>titre 2</h1> <p>mon texte 3</p> <h1>titre 3</h1> en CSS en XHTML ou HTML Balises et attributs dépréciés Les styles CSS : avantages et inconvénients Balises du HTML3.2 dépréciées en HTML4, remplacés par des styles : <center> </center> <font color=" " face=" " size=" ">...</font> Attribut dépréciés en HTML4, remplacés par des styles : bgcolor=" " align=" " Balises logiques préférables aux balises physiques : <strong>...</strong> préférable à <b>...</b> <em>...</em> préférable à <i>...</i> 5 Avantages Séparation contenu/mise en forme Meilleure lisibilité du code Code html du fichier allégé -> Diminution du temps de chargement Présentation homogène du site web Maintenance facilitée : répercussion automatique des modifications Nouvelles possibilités de mise en forme des documents html Compatible avec divers langages (HTML, XHTML, DHTML, XML ) Inconvénients Non reconnus des anciens navigateurs (< v. 4), un peu par IE3 Mieux reconnus depuis les versions 6 de Nescape, IE Subsistance de quelques incompatibilités Modèle de boîte différent pour Internet Explorer 5 6 UMLV / F. Petit 1

2 Déclaration de style Unités de taille (police, dimension d'élément...) Syntaxe Exemples Raccourci pour plusieurs propriétés voisines propriété1: valeur1; color: red; background-color: #cfcfcf; text-decoration: none; text-decoration: underline; font-weight: bold; font-size: 1.5pt; font-family: 'Times New Roman', Times, Serif; font: italic small-caps bold 8pt/12pt Arial,Times; border: 3px solid black; 7 Unité absolue Pouce (2,54cm) : 1.5in Centimètre : 1.5cm Millimètre : 1.5mm Point (1/72 in) : 15pt Pica (12 pt,1/6 in) : 15pc 0 Taille nulle Unité relative Pourcentage : 150% Taille moyenne de police utilisée dans les navigateurs : size="3" (HTML 3.2) <=> 14px <=> 12pt Taille (largeur M) : 1.5em Taille (hauteur x) : 1.5ex Pixel (résolution) : 15px 8 Codage des couleurs en CSS Règle CSS color: red border-color:red background-color:red couleur de texte couleur de bordure couleur de fond déclaration identificateur de propriété valeur Les couleurs peuvent être exprimées sous la forme : nom : red, blue, black, gray, white #rrvvbb (hexadécimal) : #cc0088 #rvb (hexadécimal abrégé) : #c08 rgb(x, y, z) : rgb(255, 0, 122) rgb(x%, y%, z%) : rgb(100%, 0%, 50%) règle CSS sélecteur h2 {color:red; text-align:center; bloc de déclarations 9 10 Ajout des styles en HTML et XHTML Style en ligne Style en ligne (intra-ligne ou incorporé) attribut style=" " dans la balise d'élément Feuille de style interne au document dans la partie <head> liste des règles CSS dans balise <style></style> Feuille de style externe liée liste des règles CSS dans un fichier externe.css appel à ce fichier externe avec une balise <link /> Feuille de style externe importée liste des règles CSS dans un fichier externe.css appel à un fichier externe Bloc de déclarations CSS incorporé dans la balise avec attribut style S'applique à une balise précise du document Intéressant pour un essai lors du développement Exemple : <p style="text-align: center; background-color:#ccc;">texte</p> A remplacer plutôt par l'utilisation d'un identifiant CSS : #truc {text-align: center; background-color:#ccc;"> XHTML : <element id="truc"> Texte UMLV / F. Petit 2

3 Feuille de style interne Feuille de style CSS externe liée Liste de règles CSS dans une balise style dans l'en-tête du document Règle appliquée à tous les sélecteurs correspondant du document Peu adaptée pour une mise en forme de plusieurs documents Adaptée pour un document isolé Exemple : <head> <style type="text/css"> body {background-color:white; color:blue; h1 {text-align: center; font-size:1.5em;color:black; </style> </head> <h1>titre A</h1> <p>texte</p> <h1>titre B</h1> Liste de règles CSS dans un fichier CSS externe Balise link à ajouter dans l'en-tête des documents html S'applique à tous les sélecteurs correspondant des documents liés Adaptée à un site web Exemple : 1) Dans le fichier html <head> <link rel="stylesheet" type="text/css" href="chemin/monstyle.css" /> </head> 2) Dans le fichier monstyle.css body {background-color:white; color:blue; h1 {text-align: center; font-size:1.5em;color:black; Feuille de style CSS importée 4 différentes manières d'appliquer un style Liste de règles CSS dans un fichier CSS externe à ajouter dans la feuille de style (interne ou externe) Se place avant tout autre déclaration de style S'applique à tous les sélecteurs correspondant des documents liés Adapté à un site web, notamment pour "cascader les styles" url("fichier.css") Exemple (dans une feuille interne) <style url("fichier.css") p {color:red; </style> <html> <head> <title>titre</title> <link rel="stylesheet" type="text/css" href="fichier1.css" /> <style url("fichier2.css"); h1 { color: blue </style> </head> <h1>ce titre est en bleu à cause du style interne</h1> <p style="color: green" >et le paragraphe est en vert.</p> </html> Code CSS : Indentation et commentaires Les différents sélecteurs : exemples body { background-color:white ; /***********/ /* titre */ /***********/ h1, h2 { text-align: center; color:#333; /* gris sombre */ /* menu */ #menu li { font-size:0.8em; Elément (sélecteur de type) : h1 Regroupement de sélecteurs : h1, h2, p Sélecteur universel : * Identifiant : p#intro1 #intro1 Classe : p.intro.intro Pseudo-classe : a:hover Sélecteur contextuel (combinaison imbriquée d'éléments) : h1 a UMLV / F. Petit 3

4 Elément (Sélecteur de type) Regroupement de sélecteurs (avec virgule) Elément (ou sélecteur de type) h1 { color:red; font-size:2em; h2 { color:red; font-size:1.5em; p { color:black; h1 {color:red; font-size:2em h2 {color:red; p {color:red; h1 {color:red; font-size:2em h2 {color:red; p {color:red; h1, h2, p {color:red; h1 {font-size:2em; h1 h2 p {color:red; h1 {font-size:2em; Sélecteur universel * Sélecteurs contextuels (sélecteurs descendants) * remplace tout élément du document dans la partie style CSS, par exemple * {margin:0 -> Tous les éléments du body (h1, h2, p, div, ul ) auront une marge de Espace blanc comme opérateur Exemple : h1 em h1 est un ancêtre de em, même lointain. em est un descendant de h1, même lointain. Dans la partie CSS h1 {color: blue; h1 em {color: red; p {color: black; em {color: green; Dans le body <h1>titre A</h1> <p>texte A </p> <h1>titre B <em> Titre C</em>Titre D </h1> <p>texte B <em> Texte C</em> Texte D </p> <p>texte B <span>texte S<em> Texte C</em></span> Texte D </p> 22 Identifiant (attribut générique) Classe (attribut générique) Un identifiant est unique dans un document. Il identifie un élément. Ajout dans une balise du document html : <p id= "intro">texte d'introduction</p> Utilisation dans une règle CSS : #intro {font-style: italic; text-align:center; identique à : p#intro {font-style: italic; text-align:center; Une classe permet de définir un sous-ensemble. Elle peut s'appliquer à plusieurs éléments. Ajout dans une balise du document html : <h1 class="intro">titre 1</p> <p class="intro">texte 2</p> <p class="intro">texte 3</p> <img class="logo">...</p> Utilisation dans une règle CSS :.intro {font-style: italic; h1.intro {text-align: center;.logo {border: 1px solid red ;.intro {color:blue; h1.intro {color:green;.logo {border: 1px solid red; UMLV / F. Petit 4

5 Eléments div et span (éléments neutres) Les pseudo-classes et les pseudo-éléments div et span sont en général associés à un id ou une class. div : balise de bloc, délimite souvent un ensemble de balises <div id="menu1"> <ul><li> </li>...</ul> </div> <div id="piedpage"> <p> </p> <p> </p> </div> span : balise en-ligne, délimite une partie de texte <p>il pris un pot de <span id="rouge">peinture rouge</span> et un pinceau.</p> <p>il pris aussi un pot de <span class="vert">peinture vert clair</span>, un pot de <span class="vert">peinture vert foncé</span>, et un autre pinceau.</p> 25 Différencie différents états d'un élément Pseudo-classes d'ancre (élément a) pour les états des liens a:link --> lien standard a:visited --> lien visité (cliqué) a:hover --> lien pointé a:active --> lien pendant le clic Exemple : a:link {text-decoration: none; a:hover, a:active {text-decoration:underline; color: red; Pseudo-éléments (ici appliqués à l'élément p) p:first-line {font-variant: small-caps; 1re ligne des paragraphes p:first-letter {font-size:2em;color:red; 1re lettre des paragraphes 26 Combinaisons de sélecteurs Propriétés de police de caractères Combinaisons possibles des différents sélecteurs Exemples : #menu1 li {line-height:2em; #menu1 li a:link {color:black; #menu1 li a:hover {color:red; #menu1 li a:active {color:red; li#intro {font-style:italic; font-style: normal italic oblique font-variant: normal small-caps font-weight : normal bold bolder lighter font-size : n p% xx-small small smaller large larger xx-large line-height: n p% (interligne entre 2 lignes) font-family: police1, police2, police3 Exemple de propriété raccourcie (ordre important) : font: italic small-caps bold 10pt/14pt Times Propriété font-family Propriétés de texte Liste de polices (pour différents OS + police générique en dernier ) font-family: Arial, Helvetica, sans-serif 5 familles de police génériques serif (ex. Times, Times new roman, Palatino, Georgia) sans-serif (ex. Arial, Helvetica, Tahoma, Verdana) cursive (ex. Zapf-Chancery, Comic Sans MS) fantasy (ex. Western, Impact) monospace ou à taille fixe (ex. Courier) Nom de police avec espace font-family: Times, "Times New Roman", serif font-family: Times, 'Times New Roman', serif serif Sans-serif Cursive fixe word-spacing: n -n letter-spacing: n -n text-decoration: none underline overline blink line-through text-transform: uppercase lowercase capitalize text-align: left right center justify text-indent (retrait des lignes) : n p% white-space : normal pre nowrap UPPERCASE lowercase Capitalize UMLV / F. Petit 5

6 Modèle de boîte et propriétés Propriétés de blocs (body, p, hn, ) : marge margin (marge externe) border (bordure) padding (marge interne, remplissage) contenu de la boîte : texte, images width height margin-top: margin-right: margin-bottom margin-left valeurs possibles : n p% -n -n% auto exemples : 5pt -12px 2em 10% Exemples de propriété raccourcie : On part d'en haut, on tourne dans le sens des aiguilles d'une montre margin: 5em 10em 5em 10em margin: 5em --> 5 pour toutes les marges margin: 5em 10em --> 5 haut/bas 10 droit/gauche margin: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche (=droit) Propriétés de boîtes : remplissage Propriétés : border padding-top: n p% padding-right padding-bottom padding-left padding Exemples de propriété raccourcie : on part d'en haut, on tourne dans le sens des aiguilles d'une montre padding: 5em 10em 5em 10em padding: 5em --> 5 pour toutes padding: 5em 10em --> 5 haut/bas 10 droit/gauche padding: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche (=droit) 34 border-top-width: n thin medium thick border-left-width: n thin medium thick border-width: 2pt 9pt 9pt 2pt border-color: red blue green black pas de couleur précisée : color de l'élément border-style: none solid dotted dashed border-style: double solid border-top: 2px dashed red border: 2px dotted red --> 4 bordures identiques (idem avec bottom) (idem avec right) 35 Utilisation de marges automatiques pour centrer un bloc Propriétés d'arrière-plan Dans la partie CSS #conteneur { width: 600px; margin-left: auto; margin-right: auto; padding: 1em; en HTML <div id="conteneur"> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus, tortor vitae elementum dignissim, elit erat cursus felis, ut tristique velit mauris vitae velit. In sed pede ut purus lobortis scelerisque. Nunc vel turpis. Vestibulum fringilla nunc a libero. Mauris molestie dolor at lectus. Proin erat quam, feugiat a, auctor ac, tempor quis, Background-attachment: scroll fixed Background-position: 50% 50% (ou 20px 10px) Background-color: #ccc Background-image: url(logo.gif) Background-repeat: repeat repeat-x repeat-y no-repeat Exemple de propriété raccourcie : Background: scroll 50% 50 % #ccc url(logo.gif) no-repeat UMLV / F. Petit 6

7 Background-attachment Background-repeat fixed ligne 7 ligne 8 haut de l'écran ligne 1 ligne 2 ligne 3 bas de l'écran après défilement par défaut : scroll ligne 7 ligne 8 no-repeat repeat-x par défaut : repeat repeat-y Background-position Propriété Float par défaut background-position: x y (valeur négative possible) 0% 0% top left left top 50% 0% top center center top top 100% 0% top right right top float: left right Utilisation : image, menu, bloc de textes, lettrine ex : <p>texte1 <img... /></p> img {float: left; img {float: right; 0% 50% left center center left left 0% 100% bottom left left bottom 50% 50% center center center 50% 100% bottom center center bottom bottom 100% 50% right center center right right 100% 100% bottom right right bottom 40 Texte Texte Propriété Clear Propriétés de listes clear: left right both exemple : <p>texte1 </p> <p id="text2">texte2</p> <img... /></p> avec CSS img {float : left; #text2 {clear: left; Texte1 Texte2... Texte1 Texte2 list-style-type : none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha liste avec list-style-image : url("chemin/fichier.gif") outside list-style-position : outside inside list-style : list-style-type list-style-image list-style-position exemples : list-style-image : url(carrebleu1.gif) list-style-type : none list-style : square inside liste avec inside UMLV / F. Petit 7

8 Propriété Display Display : none inline block list-item exemple 1 : <ul> <li>item1</li> <li>item2</li> </ul> en CSS : li {display:inline; item1 item2 item3 item1 item2 item1 item2 exemple 2 : <a href=" ">item1</a> <a href=" ">item2</a> en CSS : a {display:block; item1 item2 Le positionnement Type de positionnement : static relative absolute fixed - static (statique) : flux normal du code html - relative : décalage par rapport à la position statique - absolute (absolue) : position par rapport au parent - fixed (fixe) : position par rapport au parent Emplacement top : n p % -n -p % bottom : n p % -n -p % right : n p % -n -p % left : n p % -n -p % Superposition z-index : n -n plus n est grand, plus l'élément est au-dessus des autres Le positionnement relatif Le positionnement absolu Statique : flux normal du code html Statique : flux normal du code html Relatif (relative) - élément dans le flux du code html - décalé par rapport à sa position statique - décalé par rapport à un bord vertical ou/et horizontal - pas de changement de position des autres éléments Exemple : div#bloc1 { position: relative; top: 10px; left: -30px; -30px top left right bottom 10px 46 Absolue (absolute) - élément indépendant du flux normal -30px - perd son ancienne position dans le flux - les autres éléments peuvent prendre sa position dans le flux - positionné verticalement ou/et horizontalement (top bottom, left right) par rapport à l'origine de son parent - largeur et hauteur sont reportées à partir de cette nouvelle origine Exemple 1 div#bloc1 { position: absolute; top: 10px; left: -30px; Exemple 2 div#bloc2 { position: absolute; top: 10px; left: -30px; width: 150px; height:75px; -30px 10px 10px 47 Le positionnement : superposition d élément propriétés de page pour l'impression Superposition L élément de z-index supérieur est au-dessus des autres. div#cercle {z-index: -2;... div#carre{z-index: 1;... div#triangle {z-index: 2;... Pages { size: landscape; margin: 2cm; Pseudo-classes de pages 1ère page du pages de gauche du pages de droite du document propriétés de taille (size) : portrait lanscape (paysage) UMLV / F. Petit 8

9 Apparition d'une image au survol dans un menu Application css : bouton avec relief Partie html <div id="menu"><p> <a href="">menu 1</a><br /> <a href="">menu 2</a><br /> <a href="">menu 3</a> </p><div> Partie css #menu a:hover { background-image:url(images/guillemet.png); background-repeat:no-repeat; background-position:1% 50%; padding-left:15px; 51 Partie html <input class="bouton" type="submit'' value="envoyer" /> Partie css (pas avec ie6) input.bouton { border:2px outset red; font-weight:bold; cursor:pointer; input.bouton:hover { border:2px outset white; background-color:white; color:red; input.bouton:active { border:2px inset red; background-color:red; color:white; 52 Propriété content Feuilles de style en cascades h1:before {content: Rubrique -> ajoute l expression avant l élément h1 h2:after {content:url(haut.gif); -> ajoute l image après l élément Ne fonctionne pas avec IE6 styl1. css même poids en cas de conflit styl2. css toto.htm h1.cs {color: blue; "styl1.css"; p.cs {color: green <link href="styl2.css" rel="stylesheet"> <h1 class="cs">texte h1.cs bleu</h1> <p class="cs">texte p.cs vert</p> <p>texte</>texte p normal</p> à mettre en premier Conflits de règles : priorité à la dernière Conflits de style : priorité à la forme la plus proche Règle postérieure > Règle antérieure La dernière règle annule la règle antérieure d'un même emplacement (fichier.css, <style>). p {font-family:arial p {font-size: 10 pt --> p {font-family:arial ; font-size: 10 pt ; p {font-family:arial ; font-size: 10 pt p {font-size: 12 pt --> p {font-family:arial; font-size: 12 pt ; Style intra-ligne > Style interne > Style externe (lié ou importé) <style> p {text-align: center; font-size:10pt; </style> <p align="right">texte 1</p> <p style="text-align:left">texte 2</p> <p>texte 3</p> UMLV / F. Petit 9

10 Conflits de style : priorité à la forme la plus proche Style intra-ligne > Style interne > Style externe (lié ou importé) <style> p {text-align: center; font-size:10pt; </style> <p align="right">texte 1</p> <p style="text-align:left">texte 2</p> <p>texte 3</p> Conflits de style : sélecteur contextuel h1, p { color: blue em { color: red h1 em { color: red différent de em h1 { color: green <h1>chapitre I</h1> <p>texte avec <em>point important</em></p> <h1>chapitre II avec <em>appui sur un thème</em></h1> exemples d'utilisation ul li { list-style-type: disc ul ul li {list-style-type: square ; font-size: x-small div.menu ol a:hover {background-color: blue; Rendre prioritaire avec! important Priorité en fonction des types de sélecteurs L'ajout de!important rend prioritaire la déclaration quel que soit son emplacement. h2 {color: maroon!important h2 {color: yellow h1 { color: black! important; background: white! important p { font-size: 12pt! important; font-style: italic Sélecteur avec identifiant > Sélecteur avec classe ou pseudo-classe > Sélecteur contextuel > Sélecteur simple sélecteur déclaration ID classe élément total a b c abc li {... a=0 b=0 c=1 = 001 ul li {... a=0 b=0 c=2 = 002 ul ol li {... a=0 b=0 c=3 = 003.red {... a=0 b=1 c=0 = 010 li.red {... a=0 b=1 c=1 = 011 ul ol li.red {... a=0 b=1 c=3 = 013 #x34y {... a=1 b=0 c=0 = UMLV / F. Petit 10

Formation HTML / CSS. ar dionoea

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

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

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

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS

Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS QUI EST MAXIWEB? Maxiweb est une agence digitale pas comme les autres. Un seul objectif : faire de vous le ROI Pôle Consulting Pôle

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

{less} Guide de démarrage

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

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

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

PLATEFORME GRAPHIQUE INSTITUT DU NOUVEAU MONDE

PLATEFORME GRAPHIQUE INSTITUT DU NOUVEAU MONDE PLATEFORME GRAPHIQUE INTRODUCTION 01 Ce guide de normes a pour but d assurer à l Institut du nouveau monde une image uniforme et puissante, de communiquer la cohérence des gestes, des services et des politiques

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

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

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

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

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

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

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

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

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

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

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

Plus en détail

1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information

1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information TP Numéro 2 CRÉER ET MANIPULER DES TABLEAUX (Mise en forme, insertion, suppression, tri...) 1 CRÉER UN TABLEAU 1.1 Présentation Pour organiser et présenter des données sous forme d un tableau, Word propose

Plus en détail

Formation tableur niveau 1 (Excel 2013)

Formation tableur niveau 1 (Excel 2013) Formation tableur niveau 1 (Excel 2013) L objectif général de cette formation est de repérer les différents éléments de la fenêtre Excel, de réaliser et de mettre en forme un tableau simple en utilisant

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

Note de cours. Introduction à Excel 2007

Note de cours. Introduction à Excel 2007 Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier

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

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

Plus en détail

Parcours FOAD Formation EXCEL 2010

Parcours FOAD Formation EXCEL 2010 Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Styler un document sous OpenOffice 4.0

Styler un document sous OpenOffice 4.0 Mars 2014 Styler un document sous OpenOffice 4.0 Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

Zen, SASS, responsive design

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

Plus en détail

Plateforme publicitaire Entreprendre. Guide de normes

Plateforme publicitaire Entreprendre. Guide de normes Plateforme publicitaire Entreprendre Guide de normes 4 mars 2015 Table des matières La typographie... 4 Les unités de mesure... 4 Les images et les messages... 5 La grille de base... 6 Le bloc texte...

Plus en détail

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

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

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

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

Manuel utilisateur du CMS Anan6

Manuel utilisateur du CMS Anan6 Manuel utilisateur du CMS Anan6 Sommaire Fonctionnalités générales 05 - Paramétrage du navigateur 06 - Connexion au CMS Anan6 07 - Visualisation de l interface du CMS 08 - Détails de la liste des composants

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

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

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

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

Plus en détail

Les sites web avec NVU

Les sites web avec NVU Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

101 Réaliser et publier un site WEB

101 Réaliser et publier un site WEB 101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1

Plus en détail

// HTML, Javascript XHTML & CSS

// HTML, Javascript XHTML & CSS design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction

Plus en détail

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

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

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014 Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact

Plus en détail

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez

Plus en détail

Comment insérer une image de fond?

Comment insérer une image de fond? COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document

Plus en détail

Partie publique / Partie privée. Site statique site dynamique. Base de données.

Partie publique / Partie privée. Site statique site dynamique. Base de données. Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.

Plus en détail

Rapports d activités et financiers par Internet. Manuel Utilisateur

Rapports d activités et financiers par Internet. Manuel Utilisateur Rapports d activités et financiers par Internet Manuel Utilisateur Table des matières 1. Introduction... 3 2. Pré requis... 3 3. Principe de fonctionnement... 3 4. Connexion au site Internet... 4 5. Remplir

Plus en détail

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03 version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &

Plus en détail

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006

Plus en détail

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

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

EXEMPLE DE PAGE : FORMAT A4 (210X297)

EXEMPLE DE PAGE : FORMAT A4 (210X297) EXEMPLE DE PAGE : FORMAT A4 (210X297) 220 210 Filet noir format réel du document soit 210x297mm Zone Rose Marge intérieure de 5 milimètres ou zone d exclusion qui doit être, si possible vierge de tout

Plus en détail

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE. Microsoft. Excel XP

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE. Microsoft. Excel XP IFP Birkhadem Alger Rue des trois frères Djillali 1 REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE INSTITUT DE LA FORMATION PROFESSIONNELLE DE BIRKHADEM Initiation

Plus en détail

Comment mettre en page votre livre

Comment mettre en page votre livre GUIDE - ImprimermonLivre.com Comment mettre en page votre livre www.imprimermonlivre.com 1 V. 20131125 Conseils pour la mise en page de votre ouvrage L objectif de ce guide est de vous aider à réaliser

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

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

Initiation à linfographie

Initiation à linfographie Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence

Plus en détail

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site

Plus en détail

Celui qui vous parle. Yann Vigara

Celui qui vous parle. Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans

Plus en détail

Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.

Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement. Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer

Plus en détail

Un mini-site internet en une après-midi

Un mini-site internet en une après-midi Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,

Plus en détail

Stage «Créer et animer un site Web en équipe»

Stage «Créer et animer un site Web en équipe» Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs

Plus en détail

Premiers pas avec Scribus

Premiers pas avec Scribus Sommaire 1. Qu est-ce que Scribus?... 2 1.1. Différences entre traitement de textes et logiciel de PAO... 2 1.2. Que faut-il pour travailler avec Scribus?... 3 2. Premier projet... 3 2.1. Organiser son

Plus en détail

BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel

BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel BUREAUTIQUE Maîtriser les fonctions de base du logiciel Premiers pas dans Word - Présentation de l interface - Mode affichage écran - Méthode de Sélection, de Déplacement - La gestion crante des documents

Plus en détail

2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop

2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop 2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop

Plus en détail

CREATION d UN SITE WEB (INTRODUCTION)

CREATION d UN SITE WEB (INTRODUCTION) CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour

Plus en détail

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web

Plus en détail

Tour d horizon des CMS. Content Management System

Tour d horizon des CMS. Content Management System Tour d horizon des CMS Content Management System Qu est ce qu un CMS? C est un Sytème de gestion de contenus Gestion dynamique de contenus en ligne Contenus suivant les standards du web Séparation du contenu,

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail

Plus en détail

L informatique et la formation en direction des élus

L informatique et la formation en direction des élus L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798

Plus en détail

1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.

1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet. 1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités

Plus en détail

RACCOURCIS CLAVIERS. DEFINITION : Une «combinaison de touches» est un appui simultané sur plusieurs touches.

RACCOURCIS CLAVIERS. DEFINITION : Une «combinaison de touches» est un appui simultané sur plusieurs touches. S Vous n aimez pas la souris Les raccourcis clavier sont là pour vous faciliter la vie! INTRODUCTION : Vous avez du mal à vous habituer à la manipulation de la souris Des solutions existent : les raccourcis

Plus en détail

2013 Pearson France Adobe Illustrator CC Adobe Press

2013 Pearson France Adobe Illustrator CC Adobe Press Au cours de cette démonstration d Adobe Illustrator CC, vous découvrirez les nouvelles fonctionnalités du logiciel, comme les outils de retouche et la sélection du texte, ainsi que d autres aspects fondamentaux

Plus en détail

< Atelier 1 /> Démarrer une application web

< Atelier 1 /> Démarrer une application web MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE

Plus en détail

Troisième projet Scribus

Troisième projet Scribus Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3

Plus en détail

Débuter avec Excel. Excel 2007-2010

Débuter avec Excel. Excel 2007-2010 Débuter avec Excel Excel 2007-2010 Fabienne ROUX Conseils & Formation 10/04/2010 TABLE DES MATIÈRES LE RUBAN 4 LE CLASSEUR 4 RENOMMER LES FEUILLES DU CLASSEUR 4 SUPPRIMER DES FEUILLES D UN CLASSEUR 4 AJOUTER

Plus en détail

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION D E-MAILS ADAPTATIFS CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,

Plus en détail

HMI target Visu / PLC HMI. Pour réaliser une interface homme machine avec PLC control

HMI target Visu / PLC HMI. Pour réaliser une interface homme machine avec PLC control HMI target Visu / PLC HMI Pour réaliser une interface homme machine avec PLC control VERSION : 1.4 / PH DATE : 5 Novembre 2014 Sommaire Ce manuel explique de manière pratique les étapes successives pour

Plus en détail

Élaborer une charte graphique. Comment élaborer une charte graphique?

Élaborer une charte graphique. Comment élaborer une charte graphique? INFOGRAPHIE MATRICIELLE Élaborer une charte graphique Version 1.0 en date du 19/12/2012 Comment élaborer une charte graphique? Document de formation (Largement inspiré de l excellent tutoriel de Yannick

Plus en détail

Utiliser le logiciel Photofiltre Sommaire

Utiliser le logiciel Photofiltre Sommaire Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner

Plus en détail

Publier un Carnet Blanc

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

Plus en détail

Le codage informatique

Le codage informatique Outils de Bureautique Le codage informatique (exemple : du binaire au traitement de texte) PLAN 3) Le codage binaire 4) Représentation physique des bits 5) Le bit est un peu court... 6) Codage de texte

Plus en détail

Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com

Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com TABLE DES MATIERES L UTILISATION DES RUBANS... 3 LE CLASSEUR... 3 RENOMMER LES FEUILLES DU CLASSEUR... 3 SUPPRIMER DES FEUILLES

Plus en détail