Outil pour le Web. Polytech Marseille Département Génie Industriel et Informatique 4 - CSS. E. Tranvouez
|
|
|
- Marie-Noëlle Fleury
- il y a 6 ans
- Total affichages :
Transcription
1 Outil pour le Web 4 - CSS E. Tranvouez Polytech Marseille Département Génie Industriel et Informatique
2 Sommaire Problématique Contexte, Objectifs, Principe général Début en CSS Définition de style CSS avancé Pseudo classes, CSS et Design Utilisation de CSS et de HTML pour un design maintenable
3 Bibliographie/Webliographie CSS 2 Pratique du design web. Raphael GOETTER, Eyrolles. HTML et CSS2 Molly E. HOLZSCHLAG, Campus Press, Coll. Plongez dans. Site du W3C : World Wide Web Consortium. Organisme de standardisation de technologie pour le web : Norme W3C du CSS : Traduction en français : Outils de validation : votre code est il 100% CSS-valide?
4 1. Problématique
5 Rappel «historique» Évolution du web : Plus de contenu Plus de richesse dans la mise en forme Programmation Web devient une programmation comme une autre => On retrouve les mêmes objectifs que pour tout développement d application Séparation données traitement (web dynamique) Séparation application / présentation
6 Objectifs Faciliter la séparation du contenu de la présentation Pourquoi : Ajouter du texte sans modifier la mise en forme Et inversement Ex en bureautique: Langage Latex : Définition de catégorie de texte (titre, paragraphe, citation) identifié par des balises. Attribution de formes/style aux catégories Cas Particulier : MS Word Catégorie et style mélangés dans un seul fichier avec une séparation de style
7 Exemple - Site réalisé à en 100% HTML/CSS
8 Exemple Présentation Powerpoint?
9 Exemple le même sans les styles! + un peu de javascript :)
10 Principe HTML Texte HTML Texte forme Catégories HTML forme Exceptions <html><body> <p><font=xxx>texte </font> </body></html> html css <html><body> <p>texte</p> </body></html> <p> font:xxxx
11 Exemple de code sans CSS : source HTML <HTML> <HEAD> <Title>Old Fashionned WebPage - Toeic Version - test1.html </Title> </HEAD> <BODY> Du texte <H1>Un titre de niveau 1</H1> <H2><font face="verdana, Arial, Helvetica, sans-serif"><i> Un sous titre</i></font></h2> <P><font color="#3333ff"> Un paragraphe dont <B>cette partie est en gras</b> bleu</font><font color="red"> sauf celleci</font></p> <H2>Un autre sous titre</h2> <QUOTE> Computer Science is no more about <font color="#ff0000" face="verdana, Arial, Helvetica, sans-serif">computers </font>than astronomy is about telescopes. <QUOTE> </BODY> </HTML>
12 Exemple de code sans CSS : visualisation
13 Extraction HTML <HTML> <HEAD> <Title>Old Fashionned WebPage - Toeic Version - test1.html </Title> </HEAD> <BODY> Du texte <H1>Un titre de niveau 1</H1> <H2>Un sous titre</h2> <P>Un paragraphe dont <strong>cette partie est en gras</strong> bleu<span class="important"> sauf celle-ci</span></p> <H2>Un autre sous titre</h2> <QUOTE> Computer Science is no more about <span class="rouge"> computers </span>than astronomy is about telescopes. <QUOTE> </BODY> </HTML>
14 Affichage HTML BRUT (sans css)
15 Extraction CSS h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-style: italic; } p { color: #3333FF; }.important { color: red ; font-weight: bold; }.rouge { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; }
16 Liaison HTML / CSS 3 solutions : 1. Inclure le style dans le fichier HTML <style type="text/css"> def style </style> 2. Lier «en html» à un fichier externe => dans l entête <head> <link rel="stylesheet" type="text/css" href="chemin"> </head> 3. Lier «en css» à un fichier externe <style url(chemin) </style> Chemin peut valoir ici.css,
17 Résultat : Mozilla FireFox
18 Oui mais CSS n est pas lié exclusivement à HTML De fait CSS est lié a SGML langage à balise dont HTML est une version réduite/simplifiée Donc en théorie (et maintenant en pratique), CSS peut être utilisé également par exemple avec XML. D ailleurs, la boucle est bouclée puisqu il est également possible de produire des fichiers de traduction : XML -> HTML
19 2. CSS premiers pas Syntaxe et premiers fichiers CSS
20 Rappel des catégories de texte HTML La catégorie du texte est définie par les 2 balises qui l encadrent : <Balise>Texte catégorie Balise</Balise> Balise générales Titre : TITLE Corps de la page : BODY Sous catégorie Niveau de Titres : H1, H2, Hn Paragraphe : P Citation : QUOTE.
21 Rappel des catégories de texte HTML Il y a une hiérarchie des balises Donc un style défini à un niveau est valable (sauf autre style) pour tous les niveaux inférieur.
22 Contenu d un fichier CSS Des déclarations de styles! Des commentaires /*. */ Dans un fichier texte (extension.css) et c est tout.
23 Définition d un style d une balise HTML Syntaxe : balise_html_en_minuscule { propriété: valeur; } Exemple : p { color: blue; /* signifie que tout fichier basé sur ce style mettra tous les textes enclos par les balise <p> et </p> en bleu */ } Signifie que tout fichier basé sur ce style mettra tous les textes enclos par les balise <p> et </p> en bleu => S applique à tout le fichier html déclarant ce style
24 Propriétés CSS d un éléments HTML Sur le texte : Police : font-family Taille : font-size Épaisseur: font-weight (peut valoir bold ie gras) Style : font-style (peut valoir normal, xxx) Couleur : color Justification du texte : text-align Surlignement : text-decoration Modification de la casse, image, Exemple : <Balise>Texte catégorie Balise</Balise>
25 Définition de la police Syntaxe : Police entre ou "" Il s agit des polices habituelles HTML supposée présentes sur la machine cliente. Soit une police font-family: Times New Roman ; Soit une liste de polices font-family: Times New Roman, Times;
26 Définition de la taille Syntaxe : font-size: 12u; Unités fixes : u peut valoir pt : point (~0,35 mm) pc : pica (~4,22 mm) cm: no comment in : pour inch, pouce (~2,54 cm) Unités relatives et pourcentage em : taille./. à la taille du M «courant» (héritage) ex : taille./. à la taille du x «courant» % :./. taille de la balise courante. Existe aussi des tailles «standard» xx-small, x-small, small, medium, large, x-large, xx-large => dépendent du navigateur
27 Définition de la couleur Couleur du texte : color : couleur; Couleur d arrière plan background-color: couleur Utilisation similaire à HTML, couleur peut être mesuré en RGB : #rgb valeurs dans [0,255] Hexadécimal : #abcdef valeurs [0,f] Mot clé : liste prédéfinie de couleur (black, blue, fuschia, etc )
28 Définition des styles font-weight: valeur Valeur : normal bold lighter : par rapport à la référence bolder : idem font-style: valeur Valeur normal italic
29 Décoration et casse text-decoration: valeur Valeur : Underline Overline line-through Blink (FireFox mais pas IE) none text-transform : valeur Valeur capitalize : 1 ère lettre majuscule, le reste minuscule lowercase, uppercase, none. cumulable Peut rajouter également effet relief, ombre
30 Positionnement du texte et images word-spacing : espace entre 2 mots consécutif text-align : justification du texte left, right, justify, normal, center Ajout d une image en tant qu arrière plan: background-image: url(stars.gif); Unité de mesure : cf taille caractère
31 Positionnement des objets Un objet occupe un espace délimité par une «boîte», dans laquelle se troue une cadre contenant une zone de texte dans laquelle des marges peuvent exister. Margin : distance boite <->cadre Border : caractérise le cadre (épaisseur, couleur, ) Padding : distance cadre <-> texte Il est possible caractériser chaque coté (valeur gauche,droite, etc.). Les valeurs sont notées sur une seule ligne dans le sens de l aiguille d une montre en partant du haut.! Sauf pour <div> margin!= de 0 par défaut Comportement!= IE & Fox text Unité de mesure : cf taille caractère padding margin
32 Rajouter des styles Utilisation de «classes» c est-à-dire Un nom libre caractérisant un style Préfixé d un point Avec une définition de style classique ie {/* propriétés /*} Utilisation dans HTML Définir l attribut class de l objet HTML comme tel <balise class="maclasse">texte suivant formaté selon style css défini précédemment</balise>
33 3. CSS avancé
34 Limites 1 seul style par catégorie de texte : Avantage par rapport au respect d une charte graphique réduite Très limitative sur les possibilité de mise en forme Solution : Utilisation de sélecteurs
35 Définition de sélecteur Permet de préciser le cadre d application du style défini après le sélecteur Exemple de motifs : * : valable pour tout élément E : valable pour tout élément E E:link :Si E est une «ancre», définit le style du lien vers l ancre lorsqu il n a pas été visité (cliqué) E:visited : le contraire E: active, E:hover, E:focus : correspond au style d élément (essentiellement liens) en fonction des actions de l utilisateur* E#monID : tout élément E dont l ID (nom) est monid. Permet de faire un lien direct entre nom d un élément HTML identifié et le style (ex. champ DIV dans HTML).
36 Cas particulier des Liens Chaque lien a un état : Inactif (état initial) : link Visité (a été cliqué) : visited Survolé : hover Actif (cliqué) : active Il est possible alors de caractériser les propriétés de chaque état (couleur, décoration, etc ) Ex: a:link { text-decoration: none}
37 Définir d autres styles de sélecteur de type Utilisation de pseudo classe càd classe identifiée par un nom auquel on fera correspondre l id dans le code HTML. Cet id sera défini dans un bloc ou un composant englobant (ex, div ou liste). Intérêt : de même que les sélecteur de type évite de spécifier plusieurs la classe de style.
38 Syntaxe #Nom { Styles } : style général de la pseudo classe Nom #Nom a { Style } : style particulier des balises html <a> pour peu qu elles soient dans un bloc Nom (directement ou indirectement). #Nom a:hover {Style} :.
39 Exemple : Résultat
40 Exemple : HTML & CSS Cf. Source AlsaCréation
41 4. CSS et WebDesign
42 Conception avancée L utilisation de style peut également s appliquer à autre chose que du texte Répond à des besoins de «designer» Principe : remplacer l utilisation de tableau par des «zone de texte» libres auxquelles on peut attribuer des attributs de style: Les regroupements de texte sont dans le code html Leur agencement (interne/externe) est défini dans le fichier CSS.
43 Problème des tableaux Usage normal: présentation tabulaire d information Usage détourné : définition de zones graphiques imbriquées permettant une conception graphique évoluée. Exemple : ancien site de Inconvénients: Code difficile à écrire, illisible et donc maintenance idem. Tableaux lourds a charger (volume de données non nécessaire important) Source : openweb.eu.org
44 Ex ancien site : vision utilisateur
45 Ex ancien site : délimitations des tableaux
46 Ex ancien site : délimitations des tableaux <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tbody>[ ] <table width="756" cellspacing="0" cellpadding="0" border="0"> <tbody> </tbody> </table> <table width="756" cellspacing="0" cellpadding="0" border="0" background=""> Dans cette page 11 tableaux en tout, dont 7 imbriqués (table dans table dans table.) mais à l «époque» ça se faisait et la maîtrise du design de la page justifiait cela.
47 Problème des tableaux : suite inconvénients Accessibilité : exemple de la lecture vocale d une page web par un outils de synthèse vocale (SV) Rappel : SV prend en entrée un texte (chaîne de caractère) et produit en sortie du son (correspondant au texte of course). Ex : Voix SNCF en gare Ou ça : Plugin de SV Problème : l outil lit le Montre la phrase/le texte depuis mot lu/e le code source HTML de la page de haut en bas Source : openweb.eu.org Hors, avec les tableaux, la position du texte dans la page n est pas liée à la position d affichage
48 Solution : DIV DIV : balise html permettant de définir un bloc de balise Équivalent à un {} en C, C++, java etc Avec en plus possibilité d habillage graphique des éléments html Position libre Lui-même pouvant contenir des balises DIV Donc position dans le code source de la page indépendant de la position «affichée» dans le navigateur.
49 Exemple : page web sans cadre (frame) Bandeau Menu Contenu Pied de page => 4 div que l on va positionner habilement Source :
50 Exemple : Spécification Source :
51 Conception Il va falloir caractériser pour chaque bloc (div) La taille La couleur La position des bloc dépendra : De la position relative des déclarations des blocs dans le fichier html (ordre dans le code source) Des propriétés de positionnement : Propriété float : fait en sorte de se caler au maximum à gauche et en dessous des boites de même niveau qui la précèdent. Valeur : left, right, none. Propriété clear : interdit d avoir des élément flottant à côté de l élement utilisant cette propriété (peut préciser rien à gauche, à droite et les 2 côtés)
52 Le Code HTML <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <title>positionnement CSS</title> </head> <body> <div id="bandeau">bandeau - Nom Entreprise, page perso...</div> <div id="menu">menu</div> <div id="contenu"> <H1>Contenu de la page</h1> <P>Le texte ci dessous n'a d'autre intérêt que de visualiser le positionnement (par défaut) d'un paragraphe.</p> <P>Rien d'autre</p> </div> <div id="pied_page">pied de page - date derniere mise à jour - temperature </div> </body> </html>
53 Le fichier CSS div#bandeau { width:600px; height:50px; background-color:#00ccff; } div#menu { text-align:center; float:left; width:100px; height:400px; background-color:#ff6699; } div#contenu { float:left; width:500px; height:400px; background-color:#ffcc00; } div#pied_page { clear:both; width:600px; height:50px; text-align:center; background-color:#33ff99; }
54 Résultat normal
55 Résultat avec ordre Div différent
56 Ajout d un Menu Pour pouvoir factoriser la mise en page et les comportement : Utilisation d une liste non ordonnée (ie non numéroté) où chaque ligne est un item du menu (donc doit pointer sur une autre page) Définir un style graphique adéquat Pas de puce (list-style-type: none; ) Encadrement display: block; (encadre la zone de l element) line-height: 25px; (hauteur du cadre) background-color: #fc0; (couleur de fond du cadre) Modification des dimensions des blocs pour afficher tout le texte.
57 Ajout du menu dans le code HTML [ ] <div id="menu"> <H1>Menu</H1> <ul id="menu"> <li><a href= accueil.htm">accueil</a></li> <li><a href= ici.htm">lien Ici</a></li> <li><a href= la.htm">lien la</a></li> <li><a >Mais pas la</a></li> </ul> </div> [ ]
58 Completion du fichier CSS #menu a:hover { color: orange; background: green; } ul#menu { margin: 0; padding: 0; font: bold 1em Georgia, Times, serif; list-style-type: none; } #menu a { display: block; margin: 5px 0; color: green; text-decoration: none; line-height: 25px; width: 120px; border: 1px solid black; background-color: #fc0; text-align: center; }
59 Résultat final
60 Mais encore CSS peut permettre également d améliorer l accessibilité des pages web : Dans le but de multiplier les applications (ex. lecture d un fichier texte par un lecteur/synthetiseur vocal adéquat en voiture) Compensation d handicaps visuels ou audio Ex : H1, H2, H3, H4, H5, H6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } Cf. par exemple
61 Portabilité du code Va générer des captures d écran telles qu elles apparaîtraient dans différents navigateur : permet de détecter les problème de compatibilité CSS
62 Test conformité W3C Permet de valider si le code est «propre» càd s il respecte les standards
63 Test conformité W3C
64 Configuration page web Lang Titre Menu Contenu 30 Pied de page
65 Configuration page web 70 Titre 400 Menu Contenu Pied de page
.. 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
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
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
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?
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
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
{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
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,
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.
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
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
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
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
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
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
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
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
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
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
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
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
BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel
BUREAUTIQUE Maîtriser les fonctions de base du logiciel Premiers pas dans Word - Présentation de l interface - Mode affichage écran - Méthode de Sélection, de Déplacement - La gestion crante des documents
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...
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
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
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...
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
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...
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
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
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
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
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
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
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
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
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
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,
Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
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
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
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,
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.
Comment utiliser la feuille de style «CMLF2010.dot»
Comment utiliser la feuille de style «CMLF2010.dot» TELECHARGER LA FEUILLE DE STYLE...1 OUVRIR UN NOUVEAU DOCUMENT WORD...2 ATTACHER LA FEUILLE DE STYLE AU DOCUMENT...2 AFFICHER LES STYLES DISPONIBLES...2
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
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
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
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
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
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 Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
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
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
Sage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8
Sage 100 CRM - Guide de la Fusion Avancée Version 8 Mise à jour : 2015 version 8 Composition du progiciel Votre progiciel est composé d un boîtier de rangement comprenant : le cédérom sur lequel est enregistré
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC
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
1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.
1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités
Soyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
Un mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
Optimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
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 &
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
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
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
É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
Logiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Introduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
MO-Call pour les Ordinateurs. Guide de l utilisateur
MO-Call pour les Ordinateurs Guide de l utilisateur Sommaire MO-CALL POUR ORDINATEURS...1 GUIDE DE L UTILISATEUR...1 SOMMAIRE...2 BIENVENUE CHEZ MO-CALL...4 MISE EN ROUTE...5 CONNEXION...5 APPELS...7 COMPOSITION
Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013
Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
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
Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002
Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002 De nombreux utilisateurs rencontrant l équipe de National Instruments nous demandent comment générer un rapport complet à partir
Comment utiliser WordPress»
Comment utiliser WordPress» Comment utiliser WordPress» Table des matières» Table des matières Guide de démarrage rapide»... 2 Tableau de bord de WordPress»... 3 Rédiger un article»... 3 Modifier l article»...
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
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
CREER ET ANIMER SON ESPACE DE TRAVAIL COLLABORATIF
CREER ET ANIMER SON ESPACE DE TRAVAIL COLLABORATIF SOMMAIRE Sommaire... 2 Un espace de travail collaboratif, pourquoi faire?... 3 Créer votre espace collaboratif... 4 Ajouter des membres... 6 Utiliser
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
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
Tutoriel de formation SurveyMonkey
Tutoriel de formation SurveyMonkey SurveyMonkey est un service de sondage en ligne. SurveyMonkey vous permet de créer vos sondages rapidement et facilement. SurveyMonkey est disponible à l adresse suivante
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
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
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
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
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
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)
Optimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche
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
SII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...