Les unités de taille des polices de caractères

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Les unités de taille des polices de caractères"

Transcription

1 Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size qui détermine la taille de la police d'un élément. Elle est héritée : sa valeur sera donc transmise à tous les descendants de l'élément considéré. Les unités de taille fixe (ou unités absolues) : le point (pt); le pica (pc); le centimètre (cm); le millimètre (mm); le pouce (in). 1 pt = 0,35mm 1/72 in 1 pc = 4,22 mm 12 pt 1cm = 10 mm 1 in = 2,54 cm 25,4 mm 72 pt 6 pc Le W3C conseille de limiter leur usage à des médias de sortie connus et ce n'est jamais le cas pour les écrans. Ces unités n'ont de sens que sur une impression sur papier. En clair, on les évite sur les écrans d'ordinateur. Les unités de taille relative et pourcentages : la largeur de «M» (em) em est appelé cadratin; la hauteur d'«x» (ex); le pourcentage (%) le pixel (px). 1 em = la taille du caractère «M» dans la police de référence 1 ex = à la hauteur du caractère minuscule «x» sans jambages, dans la police de référence 100% = se définit relativement à la taille de référence dans le conteneur de l'élément 1 px = taille d'un pixel Le rapport em/ex dépend donc de la police utilisée. La méthode relative du cadratin (em) est l approche recommandée par le World Wide Web Consortium (W3C). Elle consiste en ceci : Ne pas fixer de corps de base. Le corps de base étant déterminé par le visiteur (dans les préférences de son logiciel de navigation). unités de taille des polices.docx 1/5

2 Fixer tous les autres corps en valeurs proportionnelles au corps de base (de préférence en cadratin - em). Ainsi, en assignant 1.5em à H2, les intertitres de niveau 2 auront une fois et demie le corps de base fixé par les préférences du visiteur. Si les préférences du visiteur sont réglées à 16 pixels dans son logiciel de navigation, on obtiendra la valeur de 24 pixels pour H2. Cette méthode a plusieurs avantages, notamment de s adapter aux préférences (ou handicaps visuels) des visiteurs ; certains qualifient cette approche de la seule méthode conforme aux normes d accessibilité. Elle permet aussi de s adapter à tout média (pas seulement l écran). Toutefois, ça ne fonctionne que dans les logiciels qui ont correctement implantés les spécifications du W3. Ce qui exclut bon nombre de logiciels dont Netscape 4.x et Explorer 4.x et 5.x (pour Windows) encore en usage dans une proportion non négligeable. C est de loin la méthode qui a le plus d avenir... Dans l avenir. La méthode du pourcentage (%) est un équivalent du cadratin. Référence : h1 {font-size: 2em;} /* affiché en 32px */ h2 {font-size: 1.5em;} /* affiché en 24px */ h3 {font-size: 1.17em;} /* affiché en 18px */ h4 {font-size: 1em;} /* affiché en 16px */ unités de taille des polices.docx 2/5

3 On aura compris qu'on pouvait exprimer la taille des caractères soit par un pourcentage, soit par un nombre suivi d'une unité. Par exemple, on prendra 1.0em (ou 100%) pour retrouver la taille de police de référence, 0.83em (ou 83%) pour obtenir une taille réduite à 83%, etc. La taille de la police de référence se transmet par héritage : dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur. Ainsi, définir une taille de référence de 2 em dans un paragraphe puis une taille de 2 em dans un de ses éléments enfants, on attribue à ce dernier une taille de 2 em par rapport à 2 em, soit 4 em. Tous les calculs se cumulent. Expliquons cette notion de taille de référence : Les différents éléments d'une page HTML sont des blocs contenus les uns dans les autres. Par exemple l'ensemble de la page peut contenir des calques (ou blocs DIV) qui peuvent contenir d'autres blocs, etc et on arrive finalement à des paragraphes. La taille définie en «em» ou en «%» pour un paragraphe s'appuie sur la taille qui a été définie pour l'élément qui contient ce paragraphe. Si on n'a rien défini pour ce bloc contenant, on remonte d'un cran dans la hiérarchie de ces blocs, etc. On arrive finalement à l'ensemble de la page (body). Si on n'a toujours rien défini, la référence est la taille qui a été définie par le visiteur lui-même dans les préférences de son navigateur. Petit exemple, avec des éléments div imbriqués, ayant tous une taille de texte de 1.2em : Référence : À la fin, la taille du texte a doublé! C'est un des effets de la cascade CSS : plus on avance dans l'arborescence de la page, et plus les valeurs de font-size pour les éléments imbriqués si elles sont exprimées dans des unités relatives se multiplient entre elles. Pour éviter ce genre de bévue, une seule solution : ne pas indiquer de taille de texte (propriété CSS font-size) lorsque ce n'est pas directement nécessaire! unités de taille des polices.docx 3/5

4 Préférez les unités relatives, car elles peuvent être adaptées au visiteur (mal voyant ou pas) et au périphérique (écran ou imprimé), et bannissez les unités absolues (sauf si les relations sont directement définies pour un seul périphérique, par exemple). Des limites à ne pas fixer! Avec la possibilité pour l'utilisateur d'agrandir le texte, et par conséquent l'impossibilité pour le webmaster de maîtriser au pixel près la taille du texte, il va falloir penser autant que possible à l'''extensibilité'' des différents éléments de la page, et en particulier leur extensibilité en hauteur. Voici par exemple deux petites boîtes contenant un texte court. La taille du texte est normale, et la boîte de droite à une hauteur fixe height: 20px. Et les deux mêmes boîtes après une augmentation raisonnable de la taille du texte par l'utilisateur : N'y aurait-il pas comme un problème lors de l'agrandissement du texte? La solution : ne pas fixer de hauteur pour les éléments censés contenir du texte. Cette règle n'est pas toujours facile à respecter, surtout pour des éléments faisant partie de «l'interface» du site, comme un menu de navigation ou un bandeau de titre. Mais il est important d'en tenir compte autant que possible. Les pixels Cette méthode est de plus en plus abandonnée afin de respecter les normes d accessibilité, notamment pour les handicapés visuels. Tous les organismes de normalisation concernés par l accessibilité considèrent cette méthode fautive. unités de taille des polices.docx 4/5

5 On peut voir que le caractère réserve un espace «vide» en dessous de la lettre elle-même : cet espace correspond à l'espace pour les jambages des lettres minuscules telles que le «p», le «y», etc. Grosso modo, pour un corps donné, un cadratin (ou 1em) correspond à la hauteur d'une lettre comme le «Ç» (C cédille majuscule). C'est bien sûr une approximation, mais cela donne une idée. Exemples Taille définie en points = {font-size: 12pt;} Taille définie en pixels = {font-size: 16px;} Taille définie en millimètres = {font-size: 4mm;} Taille définie en centimètres = {font-size: 0.6cm;} Taille définie en pourcentage = {font-size: 120%;} Taille définie en pc = {font-size: 1.5pc;} Taille définie en inches = {font-size: 0.3in;} Taille définie en em = {font-size: 1.5em;} Taille définie en ex = {font-size: 4ex;} Références à voir : unités de taille des polices.docx 5/5

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

1. Une image de 12 cm de long exactement

1. Une image de 12 cm de long exactement 1. Une image de 12 cm de long exactement Votre image est particulièrement grande et vous souhaitez qu elle ne mesure pas plus de 12 cm de long, pas un millimètre de plus, mais en conservant ses proportions.

Plus en détail

Préparation et impression de fichiers en PAO

Préparation et impression de fichiers en PAO Préparation et impression de fichiers en PAO Préparation et impression de fichiers page 1 La résolution des images Linéature de la trame et demi-teintes Pour imprimer, les photocomposeuses (imprimantes

Plus en détail

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

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

Plus en détail

CMS Modules Dynamiques - Manuel Utilisateur

CMS Modules Dynamiques - Manuel Utilisateur CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage

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

Fiche n 4 Utilisation de Kompozer Table des matières

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

Plus en détail

Initiation PHOTO Utilisation du logiciel Gimp

Initiation PHOTO Utilisation du logiciel Gimp COURS 2 Initiation PHOTO Utilisation du logiciel Gimp Sommaire 1. Modifier la luminosité et le contraste des zones sombres 2 1.1. Sélection de l outil lasso magnétique 2 1.2. Capturer les pixels de la

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

LA TYPOGRAPHIE du WEB

LA TYPOGRAPHIE du WEB DOSSIERS de VEILLE TECHNOLOGIQUE J.C.Sohm URL : http://cerig.efpg.inpg.fr/icg/dossiers/typo/chap5.htm CERIG Avril 2000 LA TYPOGRAPHIE du WEB 5- Les feuilles de style Définition, structure et fonctionnalités

Plus en détail

Support de formation pour le recadrage de vos images afin de les insérer dans image à la une :

Support de formation pour le recadrage de vos images afin de les insérer dans image à la une : Support de formation pour le recadrage de vos images afin de les insérer dans image à la une : l architecte de votre image 01 - Vous allez apprendre à recadrer et sélectionner une partie de votre photo

Plus en détail

Portail des communes Guide Référent ville

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

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

Formation à l'utilisation de XnView

Formation à l'utilisation de XnView Formation à l'utilisation de XnView Clément Lièvre - octobre 2013 - novembre 2014 Comment trier ses photos 1. Dans la fenêtre de gauche, développer l'arborescence et créer un sous-dossier "sélection" dans

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Réalisation de quelques pages Web / Activités et travaux d'élèves

Réalisation de quelques pages Web / Activités et travaux d'élèves Réalisation de quelques pages Web / Activités et travaux d'élèves Principe : Il s'agit de réaliser avec Dreamweaver qautre pages web (donc au format Html, hypertexte Markup Language) et les lier entre

Plus en détail

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

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

Plus en détail

Dans le domaine de l imprimerie, on doit composer avec plusieurs systèmes de mesures :

Dans le domaine de l imprimerie, on doit composer avec plusieurs systèmes de mesures : LES UNITÉS DE MESURE Dans le domaine de l imprimerie, on doit composer avec plusieurs systèmes de mesures : Le format des papiers : en Pouces La typographie : en points et picas Les annonces dans les journaux

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

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

PhotoFiltre 7 : Taille des images (10-2014)

PhotoFiltre 7 : Taille des images (10-2014) PhotoFiltre 7 : Taille des images (10-2014) 1 Taille de l'image Utilisation La commande «Taille de l'image» permet de modifier les dimensions en pixels, la résolution et la taille d'impression de l image.

Plus en détail

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR CHAPITRE 15 IMPRESSION ET PARTAGE DE PHOTOS Impression de photos Options d impression Envoi de photos à des services de partage en ligne Partage de photos

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

Les feuilles de styles

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

Plus en détail

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

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

Plus en détail

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

Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images :

Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images : Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images : l architecte de votre image 01 - O uvrir votre navigateur, nous

Plus en détail

Manuel de modifications des modèles

Manuel de modifications des modèles Manuel de modifications des modèles Contenu Avant propos...2 Introduction...2 Les 4 niveaux...2 Préparation...2 Quoi et pourquoi...2 Comment...2 Nommer les modèles modifiés...4 Niveau 1 Images...4 Quoi...4

Plus en détail

SBE 30 rue de Penthièvre 75008 PARIS Tel : 01.42.25.23.23 Mail : contact@sbedirect.com Web : www.sbedirect.com QUESTIONS REPONSES

SBE 30 rue de Penthièvre 75008 PARIS Tel : 01.42.25.23.23 Mail : contact@sbedirect.com Web : www.sbedirect.com QUESTIONS REPONSES QUESTIONS REPONSES Q: Comment imprimer avec des imprimantes utilisant des étiquettes en rouleau (par exemple les imprimantes de type 'CAB') R: En fait pour ces imprimantes, une étiquette est considérée

Plus en détail

Version pour un ordinateur Macintosh

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

Plus en détail

Les feuilles de Style HTML : CSS

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

Plus en détail

1. Utilisation du logiciel Keepass

1. Utilisation du logiciel Keepass Utilisation du logiciel Keepass L'usage de mots de passe est nécessaire pour de nombreux accès ou pour la protection de données personnelles. Il convient d'en utiliser plusieurs, suivant le type d'accès

Plus en détail

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une Introduction : On appelle «Web», contraction de «World Wide Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.

Plus en détail

DU CMS FEDERAL AU CMS ONE

DU CMS FEDERAL AU CMS ONE DU CMS FEDERAL AU CMS ONE Guide-utilisateur pour les webmasters Octobre 2012 Version Date Auteur Commentaire 1.0 Juin 2012 F Boyer Création du document 1.1 Juillet 2012 F Boyer Mise à jour 1.1b Octobre

Plus en détail

Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 3. Les raccourcis clavier

Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 3. Les raccourcis clavier N 5-13 Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 1.1. Objectifs : 1.1.1. Recadrer une image pour la rendre plus dynamique 1.1.2. Respecter les dimensions

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

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

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

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation Word: La présentation Introduction 2 ième partie Bien que le contenu du document soit le plus important, Word vous offre plusieurs options pour améliorer la présentation du texte. Cette page va vous montrer

Plus en détail

Implantation d'applications pédagogiques sur le serveur WEB du DIP

Implantation d'applications pédagogiques sur le serveur WEB du DIP Document technique destiné aux personnes mandatées pour développer et exploiter un site WEB sur le serveur pédagogique du DIP (ex-document "Marie Navoile") - 1 - Introduction Ce document est destiné à

Plus en détail

Tutoriel d'utilisation du site PEEP

Tutoriel d'utilisation du site PEEP Tutoriel d'utilisation du site PEEP Intro Le site, ape-niort.peep.asso.fr, est géré par un système de gestion de contenu (ici Mura CMS). Un CMS permet, entre autre, de générer un site de manière rapide

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

Prise en main Windows

Prise en main Windows Prise en main Windows Windows 2000 est un système d'exploitation. Un système d exploitation est un logiciel qui intervient à presque tous les niveaux de fonctionnement de votre ordinateur. Il est donc

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

Présentation du tableur

Présentation du tableur Présentation du tableur Le tableur est un outil qui permet de créer des tableaux (avec ou sans calcul). On peut s'en servir pour faire ses comptes, pour faire un calendrier ou pour tout ce qui nécessite

Plus en détail

Flash CS5. A - L environnement auteur de Flash

Flash CS5. A - L environnement auteur de Flash 1 Flash CS5 L objectif de cet apprentissage CS5 est de comprendre les concepts utilisés par le logiciel, et la manière dont il travaille. La description des outils ne sera donc pas exhaustive. Les différents

Plus en détail

Guide Ultra-book / 2012

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

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Partie Agir : Défis de XXIème siècle. CHAP 20-ACT EXP Caractéristiques des Images Numériques CORRIGE

Partie Agir : Défis de XXIème siècle. CHAP 20-ACT EXP Caractéristiques des Images Numériques CORRIGE Partie Agir : Défis de XXIème siècle. CHAP 20-ACT EXP Caractéristiques des Images Numériques CORRIGE 1/8 1. La pixellisation de l image Lancer le logiciel de traitement d Image GIMP et Ouvrir l image «colibri640.jpg»

Plus en détail

Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.

Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. 1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur,

Plus en détail

Service Général des Lettres et du Livre

Service Général des Lettres et du Livre Charte webdesign Sommaire 1 2 3 4 5 6 7 8 9 Présentation Structure du site Page accueil Sites satellites Familles chromatiques Principe de navigation éléments graphiques Familles typograhiques Traitement

Plus en détail

Version pour un ordinateur PC

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

Plus en détail

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web 1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................

Plus en détail

TD n 3 Microsoft Office Word 2007

TD n 3 Microsoft Office Word 2007 1 TD n 3 Microsoft Office Word 2007 1. Présentation Microsoft Word est un logiciel de traitement de texte puissant qui fait partie du pack Office, il permet de créer simplement des documents (des lettres,

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

Crésus-facturation multilingue. Dès version 3.4

Crésus-facturation multilingue. Dès version 3.4 Crésus-facturation multilingue Dès version 3.4 2 Crésus-facturation multi-lingue 1 Introduction Comment faire des factures multilingues? Qu'est ce qu'une facturation multilingue? Pour le logiciel Crésus-facturation,

Plus en détail

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

Plus en détail

Ajuster la dimension d une image et l imprimer

Ajuster la dimension d une image et l imprimer Ajuster la dimension d une image et l imprimer Proposé par Tabila117 Membre du Forum Nikon Numérique Document Nikon traduit par Tabila117 Version 1.1 12/07/2007 Ajuster la dimension d une image et l imprimer

Plus en détail

Photoshop / Taille et résolution de l image

Photoshop / Taille et résolution de l image 1 sur 9 03/04/2015 14:24 Photoshop / Taille et résolution de l image A propos des dimensions de pixel et de la résolution de l image imprimée Taille du fichier A propos de la résolution du moniteur A propos

Plus en détail

Maîtrisez votre Navigateur

Maîtrisez votre Navigateur Qu est-ce que Surfer ou Naviguer sur Internet? C est l action, à l aide d un navigateur internet, de suivre les liens hypertexte qui relient les pages Web les unes aux autres. La navigation Web C est une

Plus en détail

Manuel de mise en page de l intérieur de votre œuvre

Manuel de mise en page de l intérieur de votre œuvre Manuel de mise en page de l intérieur de votre œuvre Le strict suivi de ce manuel vous permettra de ne pas avoir à payer les frais de mise en page. Le but de ce manuel est de vous aider à préparer un livre

Plus en détail

Guide d utilisation. Table des matières. Mutualisé : guide utilisation FileZilla

Guide d utilisation. Table des matières. Mutualisé : guide utilisation FileZilla Table des matières Table des matières Généralités Présentation Interface Utiliser FileZilla Connexion FTP Connexion SFTP Erreurs de connexion Transfert des fichiers Vue sur la file d'attente Menu contextuel

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv>

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard)

HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard) HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard) TextEdit est un logiciel de traitement de texte intégré Apple qui s'est amélioré au fur et à mesure des versions système. (version 1.4 avec Tiger) Comme

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

Atelier d initiation. Initiation au traitement de texte

Atelier d initiation. Initiation au traitement de texte Atelier d initiation Initiation au traitement de texte 1 Contenu de l atelier Qu est-ce qu un traitement de texte?... 1 Ouverture de Word... 1 Ouverture du traitement de texte... 1 Fermeture du traitement

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

Introduction : présentation de la Business Intelligence

Introduction : présentation de la Business Intelligence Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage RI3WXIBUSO dans la zone de recherche et validez.

Plus en détail

ACCESSIBILITE. Dans le domaine de l informatique pour le handicap, "l Accessibilité" consiste à adapter et optimiser l ergonomie :

ACCESSIBILITE. Dans le domaine de l informatique pour le handicap, l Accessibilité consiste à adapter et optimiser l ergonomie : ACCESSIBILITE Définition de l Accessibilité en Informatique Dans le domaine de l informatique pour le handicap, "l Accessibilité" consiste à adapter et optimiser l ergonomie : - des matériels et dispositifs

Plus en détail

BONNES PRATIQUES AUDIENCE MOBILE

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

Plus en détail

Mémento professeur du réseau pédagogique

Mémento professeur du réseau pédagogique Mémento professeur du réseau pédagogique 1. Accéder au réseau pédagogique Il suffit quand on vous demande votre nom d utilisateur et votre mot de passe de renseigner ceux-ci. Votre nom d utilisateur est

Plus en détail

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table>

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

Plus en détail

Leçon N 5 Traitement des photos 1 ère Partie

Leçon N 5 Traitement des photos 1 ère Partie Leçon N 5 Traitement des photos 1 ère Partie Nous allons entamer une série de leçons pour le traitement des photos. Pour cela nous utiliserons 4 logiciels principaux : PICASA PAINT - GIMP et PIC MONKEYS.

Plus en détail

Tutoriel d utilisation

Tutoriel d utilisation Tutoriel d utilisation JCE est l éditeur le plus complet pour Joomla! JCE est capable de gérer les mise en page comme un éditeur de type Word ou Open Office. Il permet d insérer des images et médias de

Plus en détail

Observons un site... Une entête. Le corps de la page. Un à-côté. Un pied de page

Observons un site... Une entête. Le corps de la page. Un à-côté. Un pied de page Créer une page web Observons un site... Une entête Le corps de la page Un à-côté Un pied de page Un logo Un menu Un autre menu Une entête La fenêtre de gauche La partie principale de la page Plusieurs

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

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

Organiser vos documents Windows XP

Organiser vos documents Windows XP Organiser vos documents Windows XP Dossier? Fichier? Qu'est ce que c'est? Un dossier (autrement appelé répertoire) est un élément dans lequel on peut mettre d'autres dossiers, ou des fichiers (ou les 2).

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

Plus en détail

Adobe Programme Expert certifié

Adobe Programme Expert certifié Adobe Programme Expert certifié Bulletin d'examen de maîtrise des produits Adobe Dreamweaver CS3 Examen n 9A0-056 Liste de contrôle de certification ACE La liste de contrôle ci-dessous vous guidera tout

Plus en détail

Guide d'utilisateur. Caméra IP. www.solutionsjng.com

Guide d'utilisateur. Caméra IP. www.solutionsjng.com Guide d'utilisateur Caméra IP www.solutionsjng.com Avant-propos Merci d'avoir acheté votre caméra chez Solutions JNG. Ce guide vous aidera à connecter et configurer votre caméra IP sans fil. Pour la configuration

Plus en détail

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

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Le Creative Cloud d Adobe 9 Interface de conception

Plus en détail

MODULES 3D TAG CLOUD. Par GENIUS AOM

MODULES 3D TAG CLOUD. Par GENIUS AOM MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.

Plus en détail

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE ÉCOLE POLYTECHNIQUE

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE ÉCOLE POLYTECHNIQUE LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB POUR L AJOUT D UN DOCUMENT À PARTAGER ENTRE LES MEMBRES D UNE LISTE DE DIFFUSION ÉCOLE POLYTECHNIQUE NOVEMBRE 2003 PARTAGE

Plus en détail

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

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

Plus en détail

Avril 2013. Effectué par Karine Therrien et Geneviève Ouellet-Brown À l'intention du Bureau International du Cégep de l'outaouais

Avril 2013. Effectué par Karine Therrien et Geneviève Ouellet-Brown À l'intention du Bureau International du Cégep de l'outaouais Avril 2013 RÈGLES DIRECTRICES DE TRI DE PHOTOS ET VIDÉOS POUR DIFFUSION Plus :Traitement photo de base, recadrage et exportation pour le Web à l'aide de Photoshop À l'intention du Bureau International

Plus en détail

PF2S CHARTE GRAPHIQUE

PF2S CHARTE GRAPHIQUE CHARTE GRAPHIQUE Le pôle de formation santé et social s est muni d une charte graphique permettant de déployer son logotype sur tout les supports réalisés pour et par les composantes ou les services, ainsi

Plus en détail

> Table des matières. Gestion des pages courantes

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

Plus en détail

Attestation de conformité de «vie-publique.fr»

Attestation de conformité de «vie-publique.fr» Attestation de conformité de «vie-publique.fr» Identité du déclarant Direction de l'information légale et administrative 26 rue Desaix 75727 Paris Cedex 15 Date de la déclaration Cette déclaration a été

Plus en détail

Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple

Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple PF7. Fiche 9 Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple Avant-propos Une image numérique peut être le résultat de la combinaison des contenus de différents calques fusionnés.

Plus en détail

Comment faire des étiquettes d adresse avec LIBREOFFICE, à partir d un fichier EXEL ou CALC

Comment faire des étiquettes d adresse avec LIBREOFFICE, à partir d un fichier EXEL ou CALC Comment faire des étiquettes d adresse avec LIBREOFFICE, à partir d un fichier EXEL ou CALC LIBREOFFICE est une suite bureautique gratuite, OPEN SOURCE, et multiplate-forme.(windows, Linux, Mac OS). Une

Plus en détail

Synthèse : la mise en forme des caractères et paragraphes

Synthèse : la mise en forme des caractères et paragraphes (Word 97 pour Windows) Synthèse : la mise en forme des caractères et paragraphes 1 Attributs de mise en forme des caractères 1 1.1 Choix par la barre d'outils 1 1.1.1 Police 1 1.1.2 Taille 1 1.1.3 Graisse

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

Charte Graphique CECI EST UN EXTRAIT, LE DOCUMENT ORIGINAL COMPORTE 19 PAGES. Janvier 2012

Charte Graphique CECI EST UN EXTRAIT, LE DOCUMENT ORIGINAL COMPORTE 19 PAGES. Janvier 2012 CECI EST UN EXTRAIT, LE DOCUMENT ORIGINAL COMPORTE 19 PAGES Charte Graphique Janvier 2012 Ce programme d identification visuelle, élaboré pour «Kreatik IT» afin de répondre à ses besoins en matière de

Plus en détail

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT

Plus en détail

Présentation du Portail

Présentation du Portail PMB Services : Services pour les Bibliothèques & Centres de Documentation Présentation du Portail PMB Système Intégré de Gestion de Bibliothèque & Centre de Documentation PMB Services ZA de Mont sur Loir

Plus en détail