CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML

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

Download "CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML"

Transcription

1 CSS

2 CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention : essayez de toujours séparer la mise en forme du contenu HTML d une page web!

3 CSS - ressources

4 Syntaxe des règles CSS 3 éléments : déclaration sélecteur {propriété: valeur} sélecteur = définit l élément sur lequel s appliquent la ou les propriétés définies entre les accolades (classe, identifiant, balise) propriété = l attribut à changer valeur = la nouvelle valeur de l attribut Exemple : p {color: blue}

5 Définition d un style Dans un ou plusieurs fichiers.css - feuille de style externe A l intérieur d une page HTML (dans la balise head) feuille de style interne A l intérieur d une balise HTML (in-line)

6 CSS Quel style va être utilisé s il existe plusieurs styles définis pour le même élément HTML? Priorité Le style par défaut du navigateur Feuille de style externe Feuille de style interne Style à l intérieur d une balise HTML (in-line)

7 Les bases du code HTML Préparer un document de travail Commençons par un document minimaliste : <html> <head> <title>document sans titre</title> </head> <body> <h1>ceci est le titre principal</h1> <h2>titre secondaire no 1</h2> <p>ceci est le texte du premier paragraphe</p> <h2>titre secondaire no 2</h2> <p>ceci est le texte du second paragraphe</p> <cite> Nous naissons tous fous. Quelques-uns le demeurent. (Samuel Beckett, ) </cite> </body> </html> Copiez le texte ci-dessus (Pomme+C sur Mac)

8 Les bases du code HTML Préparer un document de travail Ouvrez Kompozer Ouvrez une nouvelle page (Fichier > Nouveau > Document vide > Ouvrir) Sélectionnez l'onglet Source (en bas à gauche de la fenêtre) Supprimez tout le texte préexistant Collez le texte HTML Retournez à l'onglet Normal Enregistrez le document sous le nom test.html Observez la page Coté source, tous les caractères ont la même taille par contre coté Normal (ce qui s'affiche aussi dans le navigateur), les caractères ont des tailles différentes. Le HTML permet donc de modifier l'apparence de mon fichier texte.

9 Les bases du code HTML Quelques balises HTML - rappel Les balises <head>head = tête, en anglais et </head> (prononcer " fin head ") définissent les limites de l'entête du document, cependant que les balises <body>body = corps, en anglais et </body> (" fin body ") définissent les limites du corps du texte La première ligne du corps du document est le titre principal qui apparaît sur la page: elle est au format " Header1= en-tête, en anglais 1 ", ou " Titre de niveau 1 ". Les balises HTML qui définissent ce format sont <h1> et </h1> (" fin h1 ") Deux lignes sont au format " Header 2 ", ou " Titre de niveau 2 ". Les balises HTML correspondantes sont <h2> et </h2> La paire de balises <cite> et </cite> sert à délimiter une citation. Les autres lignes sont au format de " paragraphe " défini par les balises <p> et </p>

10 Les bases du code HTML Modifions nos premières balises Observez attentivement l'ensemble du texte au format HTML dans l'onglet Source. Modifiez une balise <h2> en <h1> et la balise </h2> correspondante en </h1> ; Visualisez l'effet en mode Normal Veillez à modifier aussi la balise de fin, au risque de constater des effets imprévisibles. Un grand nombre de balises HTML doivent être utilisées par paires. Il est important de respecter ces paires : à toute balise " ouvrante " doit correspondre une balise " fermante ". Modifiez maintenant une balise <p> en <h2> et la balise </p> correspondante en </h2> et visualiser l'effet en mode Normal. Recomposez ensuite le document selon sa forme initiale

11 Définition d'un style Les balises HTML dans le document servent à indiquer la structure du document : en-tête (<head>), corps du document (<body>), titre de premier niveau (<h1>), titre de second niveau (<h2>), paragraphe (<p>), citation (<cite>),... Dans ce cas, il s'agit d'une présentation " par défaut " des différentes structures de la page web.

12 Définition d'un style La mise en forme du texte se fera avec l'éditeur de styles de KompoZer, un outil nommé CaScadeS. Dans la barre d'outils de KompoZer, cliquez sur le bouton qui active l'éditeur de styles. Vous pouvez aussi appuyer sur la touche F11 pour ouvrir cet outil. Ensuite, cliquez sur le petit bouton situé en haut et à gauche pour permettre la création d'une nouvelle règle de style. La zone Feuilles et règles à gauche est vide; les onglets de la partie droite de la fenêtre sont inactifs. C'est normal.

13 Définition d'un style Définition d'un style pour les titres de premier niveau Définissons maintenant une mise en forme pour le titre de premier niveau: h1. Vérifiez que l'éditeur CaScadeS est toujours disponible pour la création d'une Nouvelle règle de style Dans la zone de saisie actuellement vide, indiquez la balise h1 Cliquez ensuite sur le bouton Créer la règle de style. Dans la zone Feuilles et règles, il fait mention d'une règle pour les titres h1 Dans la zone Feuilles et règles, sélectionnez le sélecteur h1 Sélectionnez l'onglet Texte qui peut maintenant être activé. Dans la zone Couleur, indiquez red Regardez votre page HTML, le titre est rouge

14 Définition d'un style Définition d'un style pour les titres de 2ème niveau En utilisant la même méthode, définissez, pour les titres de niveau 2 (h2) : la couleur verte (green) pour les caractères la couleur jaune (yellow) pour le fond Vérifier que les couleurs sont appliquées immédiatement dans la page Enregistrer le document

15 Définition d'un style Question? Quelle est la balise qui définit le corps du texte, dans une page HTML? 1. <h1> 2. <h2> 3. <head> 4. <body> En utilisant la même méthode que ci-dessus, définissez une couleur de fond fuchsia (attention à l'orthographe) pour le fond du corps du texte, vérifier puis enregistrer

16 Où se cachent les styles? Le code HTML est une structure relativement simple qui ne contient que du texte brut. Comment une couleur de caractères ou une couleur de fond peuventelles être indiquées dans ce texte? Allez en coulisse vous comprendrez!!! Vérifiez que la page test.html est toujours ouverte. Si nécessaire, ouvrez-la ou activez l'onglet correspondant. Activez l'onglet Source de la page test.html. Dans cette page, repèrez les modifications opérées depuis la définition des mises en formes des éléments h1, h2 et body. L'ensemble est inclus dans une zone limitée par les deux balises style.

17 Où se cachent les styles? Modifions notre premier style Modifiez color: red en color: blue pour la balise h1 Retournez dans l'onglet Normal et visualisez le résultat obtenu Modifiez color: green en color: red pour la balise h2 Pouvez-vous prévoir le résultat? Modifiez finalement background-color: fuchsia en background-color: blue pour la balise body Vérifiez que le résultat est conforme à ce que vous attendiez Quel serait, l'effet de la règle cite {color : green} si on l'introduisait dans votre document de travail? 1. Aucun effet 2. Le document serait entouré d'un cadre vert 3. Le fond de la page prendrait la couleur verte 4. La citation de Samuel Beckett prendrait la couleur verte. Vérifiez votre réponse avec votre fichier

18 Où se cachent les styles? Ouvrez votre premier site Pour chaque titre redéfinissez un style La balise font ne doit plus apparaître Enregistrez

19 Annexe - propriétés CSS Définir les couleurs Texte Arrière plan

20 Définir les couleurs Noms de couleurs : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange (orange - seulement pour CSS 2.1) (source : Couleur Valeur Couleur Valeur Couleur Valeur Couleur Valeur aqua / cyan (bleu eau, cyan) #00FFFF green (vert) # navy (bleu marine) # silver (argent) #C0C0C0 black (noir) # gray (gris) # olive (olive) # teal (sarcelle) # blue (bleu) #0000FF lime (vert citron) #00FF00 purple (violet) # white (blanc) #FFFFFF fuchsia / magenta (fuchsia) #FF00FF maroon (marron) # red (rouge) #FF0000 yellow (jaune) #FFFF00

21 Définir les couleurs Nombres hexadécimaux 16 millions de couleurs (256x256x256) #RRGGBB avec R, G, B de 0 à F Exemple : #FFFFFF blanc, # noir Nombres hexadécimaux abrégés 4096 couleurs (16x16x16) #RGB avec R, G, B de 0 à F Exemple : #6C3 = #66CC33 Valeurs RGB color : rgb(125, 200, 56) Pourcentages RGB (pourcentage du maximum admis 255) color : rgb(50%, 100%, 30%) transparent pour un arrière plan transparent

22 Propriétés CSS - Texte color définit la couleur du texte Valeurs : couleur direction définit la direction du texte (CSS2) Valeurs : ltr ou rtl letter-spacing augmente ou diminue l espace entre les caractères Valeurs : normal, taille line-height - définit la distance entre les lignes Valeurs : normal, nombre, taille, % text-align définit l alignement du texte dans le cadre d un élément Valeurs : left, right, center, justify text-decoration ajoute une «décoration» au texte Valeurs : none, underline, overline, line-through, blink

23 Propriétés CSS - Texte text-indent définit le retrait de la première ligne de texte dans un élément Valeurs : taille, % text-transform définit les lettres dans un élément Valeurs : none, capitalize, uppercase, lowercase white-space - définit la façon de traiter l'espace intérieur d'un élément Valeurs : normal, pre, nowrap word-spacing augmente ou diminue l espace entre les mots Valeurs : normal, taille

24 Propriétés CSS - Arrière-plan background - un raccourci pour la définition de toutes les propriétés d arrièreplan dans une seule déclaration Valeurs : background-color background-image background-repeat backgroundattachment background-position background-attachment - indique si une image d arrière plan est fixe ou défile avec le reste de la page Valeurs : scroll, fixed background-color- définit la couleur d'arrière-plan d'un élément Valeurs : color-rgb, color-hex, color-name, transparent background-image définit une image d arrière-plan Valeurs : url(url), none background-position définit la position d une image d arrière-plan Valeurs : top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos background-repeat définit si/comment une image d arrière-plan est répétée Valeurs : repeat, repeat-x, repeat-y, no-repeat

25 Exercice Ajoutez une image d'arrière-plan à votre page. Testez plusieurs effets en jouant sur le défilement de l arrière plan. Essayez plusieurs options (ex. no-repeat) Positionnez votre image à divers emplacements et essayez les options scroll et fixed

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

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

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

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

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

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

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

Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte»

Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte» Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte» Espace collaboratif Co-Ment Date : 01/12/2013 Référence du Projet : Chef de Projet : www.cndp.fr/climatscolaire Caroline

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

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

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

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

Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.

Alors Web c'est le service Internet permettant de naviguer à travers des pages Web. 1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,

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

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

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

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

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

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

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

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

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

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

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail

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

Informatique : Création de site Web Master 2 ANI TP 1

Informatique : Création de site Web Master 2 ANI TP 1 Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :

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

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

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

Plus en détail

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

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe : 1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%

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

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

La Clé informatique. Formation Excel XP Aide-mémoire

La Clé informatique. Formation Excel XP Aide-mémoire La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles

Plus en détail

Création d un formulaire de contact Procédure

Création d un formulaire de contact Procédure Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension:

Plus en détail

Mode d emploi base de données AIFRIS : Commande et inscriptions

Mode d emploi base de données AIFRIS : Commande et inscriptions Mode d emploi base de données AIFRIS : Commande et inscriptions Vous trouverez dans les pages qui suivent la démarche à suivre pour les inscriptions en ligne au congrès de l AIFRIS. La présentation suit

Plus en détail

Création d un site Internet

Création d un site Internet Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter

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

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

Chapitre 1. Prise en main

Chapitre 1. Prise en main Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette

Plus en détail

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

Administration du site (Back Office)

Administration du site (Back Office) Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface

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

Ecran : Processeur : OS : Caméra : Communication : Mémoire : Connectique : Audio : Batterie : Autonomie : Dimensions : Poids : DAS :

Ecran : Processeur : OS : Caméra : Communication : Mémoire : Connectique : Audio : Batterie : Autonomie : Dimensions : Poids : DAS : SMARTPHONE - DUAL-CORE - NOIR 3483072425242 SMARTPHONE - DUAL-CORE - BLEU XXXX SMARTPHONE - DUAL-CORE - BLANC 3483072485246 SMARTPHONE - DUAL-CORE - ROSE 3483073704131 SMARTPHONE - DUAL-CORE - ROUGE XXXX

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux. Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment

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

Manuel d utilisation du web mail Zimbra 7.1

Manuel d utilisation du web mail Zimbra 7.1 Manuel d utilisation du web mail Zimbra 7.1 ma solution de communication intelligente Sommaire 1 Connexion à la messagerie Zimbra p.4 1.1 Prérequis p.4 1.1.1 Ecran de connexion à la messagerie p.4 2 Presentation

Plus en détail

ScIn11 informatique Session d'appel, durée 1 heure, tous documents autorisés N'oubliez pas de reporter votre numéro d'anonymat :

ScIn11 informatique Session d'appel, durée 1 heure, tous documents autorisés N'oubliez pas de reporter votre numéro d'anonymat : ScIn11 informatique Session d'appel, durée 1 heure, tous documents autorisés N'oubliez pas de reporter votre numéro d'anonymat : Vous disposez d'un fichier couleurs décrivant des couleurs par un nom et

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

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée

Plus en détail

Je sais utiliser. Création d une galerie photo pour un site Web. Picasa crée les documents. HTML pour insérer une galerie de photos dans un site web

Je sais utiliser. Création d une galerie photo pour un site Web. Picasa crée les documents. HTML pour insérer une galerie de photos dans un site web Je sais utiliser Création d une galerie photo pour un site Web Picasa crée les documents HTML pour insérer une galerie de photos dans un site web Club Informatique Éducatif Laurentin 1 Picasa offre une

Plus en détail

BC LABEL Location de bornes photos numériques

BC LABEL Location de bornes photos numériques BC LABEL Location de bornes photos numériques Mise a jour le 11-09-2014 page 1 / 63 Clé USB Pivotante Couleur Délais de livraison : 10 2, 32Go, 64 Go Tampographie, Gravure Laser Rouge, Vert, Jaune, Bleu

Plus en détail

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005 MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par

Plus en détail

NAVIGATION SUR INTERNET EXPLORER

NAVIGATION SUR INTERNET EXPLORER Centres d accès communautaire Internet des Îles NAVIGATION SUR INTERNET EXPLORER Table des matières Introduction 1- Les barres d outils 1.1 La barre d adresse 2 5 min. 1.2. Les boutons de navigation 2

Plus en détail

FrontPage Support d apprentissage septembre 2000

FrontPage Support d apprentissage septembre 2000 FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des

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

Paramétrage des navigateurs

Paramétrage des navigateurs Paramétrage des navigateurs 1 Procédure d'accès aux ressources électroniques nationales suivant le script de configuration automatique de proxy revelec.pac Document mis à jour en avril 201 Configuration

Plus en détail

Guide d usage pour Word 2007

Guide d usage pour Word 2007 Formation TIC Septembre 2012 florian.jacques@etsup.com Guide d usage pour Word 2007 ETSUP 8 villa du Parc Montsouris 75014 PARIS SOMMAIRE Interface... 2 Organiser son espace de travail... 3 La barre d

Plus en détail

PREMIERE UTILISATION D IS-LOG

PREMIERE UTILISATION D IS-LOG PREMIERE UTILISATION D IS-LOG Is-LOG est un logiciel d identification et d authentification à un ordinateur qui se substitue à la saisie du couple «Login / mot passe» par la présentation au lecteur de

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

Tuto pour connecter une source RVB RGB à un moniteur Commodore / Amiga

Tuto pour connecter une source RVB RGB à un moniteur Commodore / Amiga Tuto pour connecter une source RVB RGB à un moniteur Commodore / Amiga Il faut 1 moniteur Commodore 1084S / 1083S-D1 Ecran 1084S (au dos, il est indiqué 1083S-D1), je l ai eut avec un Amiga 600 et on va

Plus en détail

FOXIT READER 6.0 Guide rapide. Table des matières... II Utilisation de Foxit Reader 6.0... 1. Lecture... 4. Travailler dans des documents PDF...

FOXIT READER 6.0 Guide rapide. Table des matières... II Utilisation de Foxit Reader 6.0... 1. Lecture... 4. Travailler dans des documents PDF... Table des matières Table des matières... II Utilisation de Foxit Reader 6.0... 1 Installer et désinstaller... 1 Ouvrir, Créer, Fermer, Enregistrer et Quitter... 1 Définir le style et l'apparence de l'interface...

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

Support pour les langues s écrivant de droite à gauche

Support pour les langues s écrivant de droite à gauche Documentation EMu Support pour les langues s écrivant de droite à gauche Version 1.0 Version EMu 4.0 www.kesoftware.com 2010 KE Software. All rights reserved. Contents SECTION 1 Résumé 1 SECTION 2 Changer

Plus en détail

Notice d'utilisation Site Internet administrable à distance

Notice d'utilisation Site Internet administrable à distance Notice d'utilisation Site Internet administrable à distance 1. Entrer dans l'espace d'administration Pour entrer dans l'espace d'administration, cliquez sur le lien nommé «administration» ou «Connexion»

Plus en détail

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de

Plus en détail

MANUEL D UTILISATION ORBITVU EDITOR V.3

MANUEL D UTILISATION ORBITVU EDITOR V.3 MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières

Plus en détail

INTRODUCTION AU CMS MODX

INTRODUCTION AU CMS MODX INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de

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

TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5

TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5 TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES Page 1/5 ATELIER INTEGRATION A mi-parcours de votre formation, l'atelier (dont la note est coefficient 2) permet d'évaluer vos connaissances acquises lors

Plus en détail

MANUEL TBI - STARBOARD

MANUEL TBI - STARBOARD MANUEL TBI - STARBOARD TBIH MOD2 TITRE Manuel STARBOARD (Module 2) Trucs et astuces INTITULE Manuel d'utilisation du logiciel STARBOARD accompagnant le tableau blanc interactif HITACHI F-Series et FX-Series

Plus en détail

NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP

NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP NOTICE D INSTALLATION ET D UTILISATION DE LIVE BACKUP I. Installation Live Backup en mode externalisé IMPORTANT 1 - Vous devez avoir les droits administrateur de votre poste de travail ou de votre serveur

Plus en détail

Manuel d installation du clavier S5

Manuel d installation du clavier S5 1 Manuel d installation du clavier S5 Table des matières 1. Contenu de l emballage... 3 2. Guide de programmation... 3 3. Description... 4 4. Caractéristiques techniques du clavier S5... 4 5. Spécifications

Plus en détail

Dévéloppement de Sites Web

Dévéloppement de Sites Web 1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations

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

ht t p: // w w w.m e di al o gis.c om E - Ma i l : m ed i a l og i s @ m e di a l o g i s. c om Envoi des SMS

ht t p: // w w w.m e di al o gis.c om E - Ma i l : m ed i a l og i s @ m e di a l o g i s. c om Envoi des SMS Page 1/8 Envoi des SMS La nouvelle fonctionnalité d envoi de SMS va vous permettre d envoyer des SMS directement à partir de Médialogis SQL. Ces SMS peuvent être générés automatiquement lors de la saisie

Plus en détail

MESUREZ L'IMPACT DE VOS CAMPAGNES!

MESUREZ L'IMPACT DE VOS CAMPAGNES! MESUREZ L'IMPACT DE VOS CAMPAGNES! Concrètement, qu est-ce que mesurer l'impact de vos campagnes? L'utilisateur, après avoir envoyé une campagne e-mailing, peut mesurer son impact en consultant les résultats

Plus en détail

EXCEL TUTORIEL 2012/2013

EXCEL TUTORIEL 2012/2013 EXCEL TUTORIEL 2012/2013 Excel est un tableur, c est-à-dire un logiciel de gestion de tableaux. Il permet de réaliser des calculs avec des valeurs numériques, mais aussi avec des dates et des textes. Ainsi

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

VTigerCRM. CRM : Logiciel de gestion des activités commerciales d'une (petite) entreprise

VTigerCRM. CRM : Logiciel de gestion des activités commerciales d'une (petite) entreprise CRM : Logiciel de gestion des activités commerciales d'une (petite) entreprise Possibilités : Gestion des rendez-vous/appels Gestion des e-mails Gestion des stocks Gestion des ventes Enregistrement des

Plus en détail

Un outil open source de gestion de bibliographies

Un outil open source de gestion de bibliographies Un outil open source de gestion de bibliographies Généralités... 2 Installation... 2 L interface zotero... 2 Ajouter une notice bibliographique manuellement... 4 Modifier ses notices bibliographiques...

Plus en détail

F.A.Q 1.0 Designer 3D Atex System

F.A.Q 1.0 Designer 3D Atex System -Sommaire- 1-Comment installer le logiciel?...2 2-Comment créer un projet?...3 3-Comment ouvrir un projet?...4 4-Comment se déplacer en 2D & 3D?...5 5-Comment ajouter des composants?...6 1-Comment installer

Plus en détail

GUIDE Excel (version débutante) Version 2013

GUIDE Excel (version débutante) Version 2013 Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte

Plus en détail

Création d un fichier de découpe

Création d un fichier de découpe Création d un fichier de découpe DECOUPE 1 Fichier entièrement vectorisé au format illustrator uniquement Toutes les découpes sont regroupées dans 1 seul fichier.ai.ai 1 seul fichier. ai 800 x 100 mm -

Plus en détail

ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580)

ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580) 1 sur 7 12/05/2014 15:39 ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580) Catégorie : Services au public (/portail/services-au-public) Mis à jour le vendredi

Plus en détail

FileZilla. Sauvegarder son site Guppy à l aide de. Sommaire:

FileZilla. Sauvegarder son site Guppy à l aide de. Sommaire: FileZilla http://filezilla.sourceforge.net/ Sauvegarder son site Guppy à l aide de Sommaire: P. 2 Téléchargement et installation P. 3 Paramétrage du transfert P. 3 L'environnement de Filezilla P. Sauvegarde

Plus en détail

Manuel Utilisateur ENTREPRISE Assistance téléphonique : 0892 43 43 63 (0.34 / min)

Manuel Utilisateur ENTREPRISE Assistance téléphonique : 0892 43 43 63 (0.34 / min) Manuel Utilisateur ENTREPRISE Assistance téléphonique : 0892 43 43 63 (0.34 / min) Sommaire : 1. Introduction 2. Pré requis techniques 2.1. Configuration minimale requise pour la consultation des annonces

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

Traitement numérique de l'image. Raphaël Isdant - 2009

Traitement numérique de l'image. Raphaël Isdant - 2009 Traitement numérique de l'image 1/ L'IMAGE NUMÉRIQUE : COMPOSITION ET CARACTÉRISTIQUES 1.1 - Le pixel: Une image numérique est constituée d'un ensemble de points appelés pixels (abréviation de PICture

Plus en détail

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer

Plus en détail

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

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Guide d'utilisation. Centre des ressources Demande électronique de matériel publicitaire. Juin 2005

Guide d'utilisation. Centre des ressources Demande électronique de matériel publicitaire. Juin 2005 Centre des ressources Demande électronique de Compagnie d'assurance vie RBC 2005. Tous droits réservés. Table des matières INTRODUCTION... 3 ACCÈS À LA DEMANDE ÉLECTRONIQUE DE MATÉRIEL PUBLICITAIRE...

Plus en détail

Incluant l analyse du patrimoine. Description du rapport (Couple seulement)

Incluant l analyse du patrimoine. Description du rapport (Couple seulement) Incluant l analyse du patrimoine Description du rapport (Couple seulement) Révisé le 25 mai 2011 Table des matières 1. Introduction... 3 1.1 Le rapport PRO et Patrimoine : outil privilégié de communication

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

Infolettre #18 : Les graphiques avec Excel 2010

Infolettre #18 : Les graphiques avec Excel 2010 Infolettre #18 : Les graphiques avec Excel 2010 Table des matières Introduction... 1 Hourra! Le retour du double-clic... 1 Modifier le graphique... 4 Onglet Création... 4 L onglet Disposition... 7 Onglet

Plus en détail

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013 Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières

Plus en détail

Infrastructure - Capacity planning. Document FAQ. Infrastructure - Capacity planning. Page: 1 / 7 Dernière mise à jour: 16/04/14 16:09

Infrastructure - Capacity planning. Document FAQ. Infrastructure - Capacity planning. Page: 1 / 7 Dernière mise à jour: 16/04/14 16:09 Document FAQ Infrastructure - Capacity planning EXP Page: 1 / 7 Table des matières Détails de la fonctionnalité... 3 I.Généralités... 3 II.Configuration... 3 III.Vue globale des capacités...3 IV.Vue par

Plus en détail

Le publipostage avec Open Office

Le publipostage avec Open Office Le publipostage avec Open Office 1 / 7 Présentation La suite bureautique Open Office.org fournit les outils nécessaires pour la réalisation de publipostage et vous permet ainsi de réaliser et de personnaliser

Plus en détail