Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :
|
|
|
- Henriette Leboeuf
- il y a 7 ans
- Total affichages :
Transcription
1
2 Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs endroits) Faciliter la mise à jour et l'évolution des sites Faciliter le travail collaboratif Augmentation des potentiels de présentation
3 Introduction CCS : Feuilles de style en cascades (Cascading Style Sheets) Volet "présentation" de la conception et de la réalisation de page Web Principes de base : Une déclaration de style est composée de : Un sélecteur (éléments et conditions d'application) Une déclaration des propriétés Un couple propriété-valeur Syntaxe d'écriture d'un style Sélecteur { propriété1 : valeur1; propriété2 : valeur2;}
4 Introduction Exemple: div { color : red; background-color : yellow;} Validation
5 Introduction Sélecteurs Éléments Classes Identifiantsunique Attributs et valeurs d'attributs
6 Introduction Sélecteurs Un élément p { color : yellow; background-color : red; } Plusieurs éléments h1 { color : yellow; background-color : red; } h2 { color : yellow; background-color : red; } h3 { color : yellow; background-color : red; } ou h1, h2, h3 { color : yellow; background-color : red; } et en spécifiant, au besoin h3 { margin : 10px; } Tous les éléments * { background-color : red; } p { background-color : yellow; }
7 Introduction Les classes CSS :.nom_de_la_classe{ color : red; } XHTML : <p class=" nom_de_la_classe"> </p> Application à un seul élément Seule les divisions dont l'attribut class est jaune seront affectés par div.jaune{ color : yellow; }
8 Introduction Sélecteur d'identifiant id Application d'un style à un identifiant (application à un seul élément) div { color: black; } #bleu{ color: white ; background-color: blue; } <div id="bleu"> </div> <div> </div> Sélecteurs d'attributs Élément [attribut] { Définition du style; } img[longdesc] { border-color: red; } Sélecteurs de valeur d'attribut Élément [attribut="valeur"] { Définition des styles; } img[alt="elvis"] { border-color: red; }
9 Introduction Écriture de feuilles de style Élément <style> inclus dans <head> url(fichier.css); Exemple: <style url(imprimante.css); div, p { font-style: italic; } </style> Fichier externe Relié au fichier XHTML avec l'élément <link/> Exemple: <link rel="stylesheet" type="text/css" href="forest.css" media="screen title="css de Christian" /> En ligne <p style="color:sienna;margin-left:20px">this is a paragraph.</p>
10 Introduction Ordre d héritage des styles! 1. Navigateur 2. Feuille de style externe 3. Feuille de style interne (section head) 4. En ligne(dansun élémenthtml)
11 Introduction Unités de longueur Nombre entier ou décimal suivi d'une unité de mesure Unités relatives : em: taille de la police ex : taille de la lettre "x" minuscule dans la police utilisée px : pixel (variable en fonction du média) px : pixel (variable en fonction du média) Unités absolues: in : pouce(25,4 mm) cm : centimètre mm : millimètre pt : point (1/72 de pouce) pc : pica (12 points, 1/6 de pouce) Les pourcentages
12 Introduction Style sublcass(id) <style type=text/css>.first {color : red; font-size : 20pt; font-weight : bold; } #green {color : green } </style> <p class=first> font size is 20pt, red and bold <p class=first id=green> is 20pt, green and bold! <p id=green> normal in green!
13 Introduction Couleurs Mot-clé: black, blue, yellow, etc. (17) h1 { color : gray; } Code hexadécimal: #0000FF (bleu) h1 { color : #FF0000; } RGB : rgb(red, Green, Blue), 3 valeurs entre 0 et 255 h1 { color : rgb(75,0,0); }
14 Introduction Couleurs d'avant-plan Sélecteur{ color : valeur inherit} Couleursde fond Sélecteur{ background-color : valeur transparent (par défaut) inherit } Images de fond Sélecteur{ background-image : url(url) none inherit } Traitement graphique préalable
15 Et les cascades dans tout ça Règles de cascade de CSS pour l'attribution du style s'appliquant à un élément donné Gestion des priorités d'attribution Sélection selon le média Attribut media, valeurs screen, print, all, etc. <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">
16 La déclaration!important p {color: gray!important;} * { color: black; } Sélection selon le créateur!important aura la priorité Styles de l'utilisateur avec la déclaration!important Styles du concepteur (auteur) avec la déclaration!important Styles de l'utilisateur non déclarés!important Styles du concepteur (auteur) non déclarés!important Styles par défaut du navigateur
17 Positionnement des images de fond Par défaut, répétition horizontale et verticale Sélecteur{ background-repeat : repeat repeat-x repeat-y no-repeat inherit} repeat-x : répétition horizontale, en haut repeat-y : répétition verticale, à gauche no-repeat: en haut, à gauche Sélecteur{ background-position : [[<%> <unité> left center right] [<%> <unité> top center bottom]?] [left center right] [top center bottom] inherit } Sélecteur{ background-attachment : scroll fixed inherit} scroll : défilement de l'image avec le contenu fixed: conservation de l'image à sa position initiale inherit: héritage de la valeur du parent Possibilité de définition globale du fond Background :
18 Modèlede cadre CSS
19 Bordures Élément: border-style Syntaxe: CSS border-style : [ none hidden <style> ] {1,4} inherit style : dotted, dashed, double, groove, ridge, inset, outset {1,4} : spécification pour chaque bordure (en partant d'en haut, dans le sens horaire) Définition individuelle du style des bordures : border-top-style border-right-style border-bottom-style border-left-style
20 Largueur des bordures Élément: border-width Syntaxe: CSS border-width : <bord> {1,4} inherit bord: thin medium thick <unitéde mesure> {1,4} : spécification pour chaque bordure (en partant d'en haut, dans le sens horaire) Définition individuelle de la largeur des bordures : border-top-width border-right-width border-bottom-width border-left-width
21 Couleur des bordures Élément: border-color Syntaxe: border-color : [ <couleur> transparent ] {1,4} inherit couleur : voir remarques sur la gestion des couleurs {1,4} : spécification pour chaque bordure (en partant d'en haut, dans le sens horaire) Définition individuelle de la largeur des bordures : border-top-color border-right-color border-bottom-color border-left-color Possibilité de définition globale des bordures border :
22 Marges Élément: margin Syntaxe: CSS margin : <largeur> {1,4} inherit largeur : nombre entier suivi d'une unité {1,4} : spécification pour chaque marge (en partant d'en haut, dans le sens horaire) Définition individuelle du style des bordures : margin-top margin-right margin-bottom margin-left
23 Espacements Élément: padding Syntaxe: CSS padding : <largeur> {1,4} inherit largeur : nombre entier suivi d'une unité {1,4} : spécification pour chaque marge (en partant d'en haut, dans le sens horaire) Définition individuelle du style des bordures : padding-top padding-right padding-bottom padding-left
24 Contours (espace à l'extérieur des bordures) Élément 1 : outline-style Syntaxe: outline-style : none <style> inherit style : dotted, dashed, double, groove, ridge, inset, outset Élément 2 : outline-color Syntaxe: outline-color : <couleur> invert inherit couleur : voir remarques sur la gestion des couleurs Élément 3 : outline-width Syntaxe: outline-width : <longueur> thin medium thick inherit longueur : nombre entier suivi d'une unité
25 Styles : texteet liens CSS propose 5 familles de polices génériques Principes d'ergonomie et d'utilisabilité Élément: font-family Syntaxe: font-family :[[<nom> <generic>],*] inherit nom : nom de la police suivi d'une virgule generic: nom de famille générique serif, sans-serif, cursive, monospace, fantasy Exemple: p { font-family: Arial, Helvetica, sans-serif; }
26 Styles : texteet liens CSS propose 5 familles de polices génériques Principes d'ergonomie et d'utilisabilité Propriété: font-family Syntaxe: font-family : [[<nom> <generic>],*] inherit nom : nom de la police suivi d'une virgule generic: nom de famille générique serif, sans-serif, cursive, monospace, fantasy Exemple: p { font-family: Arial, Helvetica, sans-serif; }
27 Taille des polices Propriété: font-size Syntaxe: font-size :<absolue> <relative> <longueur> % inherit Absolue: xx-small à xx-large Par rapport à l'élément parent ou à la taille par défaut (medium, 16 pixels) Coefficient : 1.2 (1.5 dans CSS 1) Relative : smaller oularger Par rapport à l'élément parent ou à la taille par défaut (medium, 16 pixels) Coefficient : 1.2
28 Taille des polices Propriété: font-size Syntaxe: font-size :<absolue> <relative> <longueur> % inherit Longueur: mm, cm, in, px, em, ex, pt, pc % : pourcentage, par rapport à l'élément parent
29 Graissedu texte Propriété: font-weight Syntaxe: font-weight : normal bold bolder lighter inherit Style des polices Propriété: font-style Syntaxe: font-weight : normal italic oblique inherit
30 Autres propriétés Police font-variant : small-caps normal inherit text-transform : uppercase lowercase capitalized none inherit text-decoration : none [underline overline line-through blink] inherit Interligne line-height : normal <nombre> <longueur> % inherit Alignement text-align : left center right justify inherit
31 Autres propriétés Indentation text-indent : <long> % inherit Style des liens Rien de spécifique aux liens dans CSS Pseudo-classes : a:link a:visited a:active
32 Positionnement Principe sous-jacent : le modèle des boîtes CSS 4 grandes catégories de techniques : Positionnement selon le flux normal (bloc et enligne) Positionnement flottant Positionnement absolu Positionnement fixe
33 Positionnement flottant XHTML: mise en page selon le flux Flottement en CSS : positionnement à l'intérieur d'un élément(conteneur) Propriété: float Syntaxe: float : left right none inherit Note : propriété applicable à condition de connaitre la hauteur et la largeur de l'élément
34 Positionnement relatif Principe : lecture du flux normal puis déplacement des éléments dont le positionnement est relatif Conséquence : zone vides et possibilités de chevauchements Technique sensible à l'ordre d'écriture des éléments (superposition des éléments se chevauchant)
35 Positionnement relatif Propriétés: position, left, top, right, bottom Syntaxe: position : relative left : <longueur> % auto inherit top : <longueur> % auto inherit right : <longueur> % auto inherit bottom : <longueur> % auto inherit Note : la valeur auto est calculée en fonction de la valeur complémentaire
36 Positionnement absolu Ne tient pas compte du flux Positionnement en fonction de la relation parent-enfant Propriétés: position, left, top, right, bottom Syntaxe: position : absolute left : <longueur> % auto inherit top : <longueur> % auto inherit right : <longueur> % auto inherit bottom : <longueur> % auto inherit
37 Positionnement fixe Cas particulier du positionnement absolu Conteneur = fenêtre du navigateur ( élément parent) Solution à la technique des cadres Propriétés: position, left, top, right, bottom Syntaxe: position : fixed left : <longueur> % auto inherit top : <longueur> % auto inherit right : <longueur> % auto inherit bottom : <longueur> % auto inherit
38 Empilement Positionnements relatif, absolu et fixe Ordre d'apparition Gestion de l'ordre d'apparition dans le CSS Propriété: z-index Syntaxe: z-index : auto <nombre> inherit auto: même que l'élément parent nombre: nombre négatif ou positif
39 Présentation des listes Variation de la numérotation List-style-type : <type> none inherit Type : decimal, decimal-leading-zero, upper-latin, lower-latin, upper-roman, lower-roman, lower-greek Variation des puces List-style-type : disc circle square none inherit List-style-image : <uri> none inherit Variation sur le rendu (type d'affichage) Display : none inline block list-item table inline-table table-row-group table header-group table-footer-group table-row table-column-group table-column table-cell table-caption inherit
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
.. 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
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
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?
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
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
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
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
{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
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
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
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
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
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
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
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
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
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
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
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
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
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,
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 &
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
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
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
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
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,
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.
Atelier Formation Pages sur ipad Pages sur ipad
Pages sur ipad 1/43 Table des matières Atelier Formation Pages sur ipad Introduction à Pages 3 Créer ou ouvrir un document 3 Créer ou ouvrir un document 3 Textes et images du modèle 4 Remplacer du texte
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
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 :
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
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
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
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
Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps.
Cours pratique Excel Présentation du classeur cours.xls C est un classeur qui contient 7 feuilles Liste de personnes Calculs simples Solde Listes Auto Relatif Absolu Formats Paye Cours AFM Dans chacune
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
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
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
É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
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...
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
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
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...
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
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
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
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
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
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
Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:
1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web
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
Dans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
Exemple de charte d intégration web
Exemple de charte d intégration web Ce document est un exemple de charte d'intégration. Il est à adapter en fonction des contraintes, des choix, des objectifs de l'équipe, la société qui l'utilise. Il
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
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD
Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD Objectifs Concevoir une modèle conceptuel de données pour Access Durée 45 Support Papier Travail à faire : 1. Concevoir le dictionnaire des données.
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
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
MANUEL D INSTRUCTION
MANUEL D INSTRUCTION ---------- Régulateur de Charge Solaire pour deux batteries, Pour Caravanes, Camping-Cars & Bateaux Courant (12V or 12/24V automatique) NOTES: Utilisable seulement avec des panneaux
Cours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
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
About Showing Si la valeur est true (vraie), alors la fenêtre "A propos" est affichée.
About Showing Si la valeur est true (vraie), alors la fenêtre "A propos" est affichée. get about showing Adjust Horizontal Tile Si la valeur est vraie ( true ), alors permet le recouvrement automatique
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.
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
Mon aide mémoire traitement de texte (Microsoft Word)
. Philippe Ratat Mon aide mémoire traitement de texte (Microsoft Word) Département Ressources, Technologies et Communication Décembre 2006. Sommaire PRÉSENTATION DU DOCUMENT 1 Objectif principal 1 Deux
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
// 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
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
Rappels Entrées -Sorties
Fonctions printf et scanf Syntaxe: écriture, organisation Comportement Données hétérogènes? Gestion des erreurs des utilisateurs 17/11/2013 Cours du Langage C ibr_guelzim@yahoo.fr ibrahimguelzim.atspace.co.uk
VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET
VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET Brancher / débrancher l ordinateur de la prise Allumer / éteindre l ordinateur : pour allumer ou éteindre l ordinateur vous devez appuyer sur le bouton On/off
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
AC PRO SEN TR «services TCP/IP : WEB»
B AC PRO SEN TR «services TCP/IP : WEB» TP N 2: Installation des services utilisateurs (WEB) Nom : Prénom : Classe : Date : Appréciation : (2 points d'autonomie si vous n'utilisez aucune aide) Note : /50
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
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
Nouveautés de la version moodle 2.7
Nouveautés de la version moodle 2.7 Atto Éditeur de texte facile Le nouveau éditeur de texte dans Moodle à été développé spécialement pour convivialité et accessibilité. Au-dessus de la zone d'écriture
Créer votre propre modèle
Créer votre propre modèle Vous recherchez un modèle personnalisé pour vos présentations Microsoft PowerPoint qui comprend le nom de votre organisation et un arrière-plan unique avec les couleurs et les
Mise en forme d'un document écrit sous Word - quelques rappels pour consolider ses connaissances -
Mise en forme d'un document écrit sous Word - quelques rappels pour consolider ses connaissances - Le Brevet Informatique et Internet (B2i) a pour objectif de faire acquérir un ensemble de compétences
Création d'une application WEB avec PHP / MySQL
1 Créer une application WEB avec PHP / MySQL Par Philippe Bousquet Copyright (c) 2003 2008 Philippe Bousquet. 2 Ce livre électronique est une réédition d'un article de préparation d'une
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
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 -
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
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
Impress / Présentation
Impress / Présentation Initiation Version 1.00 du 24.04.2006 Réalisé avec : OOo 2.0.2 Plate-forme / Os : Toutes Distribué par le projet fr.openoffice.org Sommaire 1Définition...3 2Assistant Présentation...3
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
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,
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,
Cours de D.A.O. Mécanique
Cours de D.A.O. Mécanique Institut Sainte-Begge 3ème & 4ème qualification technique Site Cobegge électromécanique QCad, le DAO libre Qcad est un logiciel libre de dessin apte à dresser des plans, tout
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
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
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
Définition 0,752 = 0,7 + 0,05 + 0,002 SYSTÈMES DE NUMÉRATION POSITIONNELS = 7 10 1 + 5 10 2 + 2 10 3
8 Systèmes de numération INTRODUCTION SYSTÈMES DE NUMÉRATION POSITIONNELS Dans un système positionnel, le nombre de symboles est fixe On représente par un symbole chaque chiffre inférieur à la base, incluant
Manuel de formation Spaceman 1 ère journée
Manuel de formation Spaceman 1 ère journée Table des Matières Présentation des barres d outils et des icônes...4 Présentation de l espace de travail...10 1 ère PARTIE : CONSTRUIRE LE MOBILIER...11 La gondole
UEO11 COURS/TD 1. nombres entiers et réels codés en mémoire centrale. Caractères alphabétiques et caractères spéciaux.
UEO11 COURS/TD 1 Contenu du semestre Cours et TDs sont intégrés L objectif de ce cours équivalent a 6h de cours, 10h de TD et 8h de TP est le suivant : - initiation à l algorithmique - notions de bases
Carta Genius Guide utilisateur
Guide utilisateur Version 5.2.0 20 juin 2006 Amaury Bouchard Association Pandocréon Statut de ce document Ce document décrit le logiciel et explique pas-à-pas l'ensemble des fonctionnalités qu'il propose.
Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -
UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles