Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description
|
|
|
- Alphonse Goudreau
- il y a 7 ans
- Total affichages :
Transcription
1 Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez un classique de l'art Moderne, Composition II en Rouge, Bleu et Jaune de Pietr Mondrian, directement dans votre navigateur, en utilisant la balise <div> et les notions d «#id» et de «.class». 1 / 12
2 Étape 1 : peignons le mur de notre galerie. Commençons par nous offrir un grand mur gris pour accrocher notre toile. Créons deux fichiers dans le même répertoire. Le premier s'appellera modern_mondrian.html et le deuxième s'appellera style.css. Copions la structure de base d'une page html dans le fichier mondrian.html. Votre code devrait ressembler à ceci : <!DOCTYPE html> <html> <head> <title>mon titre</title> <meta charset="utf-8"/> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> </head> </html> Dans le fichier css, donnons aux balises html et body une couleur grise. Pour réaliser cela, utilisons la propriété background-color. Nous choisirons comme couleur de fond un gris clair. Nous noterons cette couleur sous sa forme hexadécimale : #F6F6F6. Pour donner rapidement la même propriété à plusieurs éléments, il suffit de séparer leur nom par une virgule. Votre code devrait ressembler à ceci : body, html { background-color: #f6f6f6; Sauvegardez et regardez le résultat dans votre navigateur. Nous avons un beau mur gris clair pour exposer notre chef-d'oeuvre. Étape 2 : accrochons notre toile Nous allons créer un grand carré. Ce sera la toile pour notre peinture au code. Pour cela, nous allons nous servir de deux nouveaux concepts : #id et <div>. Dans le fichier HTML, utilisons la balise <div>. La balise div ne fait rien en particulier, elle indique seulement une division. C'est une boîte dans laquelle on place d'autres éléments (textes, images, etc). 2 / 12
3 Il est possible de donner un nom, une identité unique à cet élément en insérant dans la balise ouvrante un attribut id. Cela se fait de cette manière : <div id='' ''>. Cela permettra de lui appliquer des styles CSS. Insérons notre <div> en lui donnant l'id «painting» (peinture en anglais). Enregistrez les modifications et regardez le résultat dans votre navigateur. Pour le moment, rien n'apparaît sur le mur de notre galerie. Notre toile reste invisible. Nous allons avoir besoin de CSS pour lui donner un peu de style. Dans notre fichier CSS, nous allons utiliser le sélecteur #id. Ce sélecteur permet d'appliquer un style à un élément unique de notre page HTML. Vous pouvez donner à votre sélecteur le nom que vous voulez, vous devez seulement placer le caractère # (dièse) devant le nom de votre div. Nous allons appeler notre sélecteur #painting pour donner un style à notre <div id= painting >. #painting { Utilisons les propriétés width et height pour régler la largeur et la hauteur. Donnons à ces deux propriétés une valeur de 400px. Utilisons un beau blanc cassé pour donner une couleur de fond à notre toile. Pour cela, utilisons la propriété background-color et donnons lui la valeur hexadécimale suivante : #FFF4DB. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; Enregistrez les modifications et regardez le résultat dans votre navigateur. Vous remarquez que votre toile se trouve dans le coin en haut à gauche de votre navigateur. Nous allons créer des marges en utilisant une nouvelle propriété : margin. Nous voulons créer une marge en haut, une marge à droite et une marge à gauche. Nous allons devoir parler un peu anglais. Pour régler la marge en haut, nous utiliserons la propriété margin-top, pour la marge de gauche, la propriété margin-left, et pour celle de droite, margin-right. 3 / 12
4 Pour centrer notre toile sur le mur de notre galerie, il y a une méthode simple et rapide. Donnons la valeur auto à margin-left et margin-right. Pour la marge en haut, donnons la valeur 30px à la propriété margin-top. Juste pour le plaisir des yeux, nous allons ajouter une légère ombre aux contours de notre tableau. Utilisons la propriété box-shadow et donnons lui les valeurs suivantes : 10px 10px 0px #8D8D8D. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; margin-left : auto ; margin-right : auto ; margin-top : 30px ; box-shadow : 10px 10px 0px #8D8D8D ; Enregistrez les modifications et admirez le résultat dans votre navigateur. Notre toile est prête! Nous avons mis en place notre structure de base. Il est temps de faire des mathématiques. Étape 3 : faisons quelques <div>isions! Il est temps de définir la structure de notre peinture. Il est très utile de dessiner un plan et de faire quelques calculs avant de coder. Il sera plus facile ensuite de placer les balises <div> et d'écrire leur style CSS. Pensons à notre tableau en termes de lignes, de colonnes et de boîtes. Tous ces éléments auront leur propre #id et leurs propres balises <div>. Certains seront visibles et en couleur, d'autres seront invisibles et serviront de conteneur. 4 / 12
5 Voici un plan de notre Mondrian en 400 pixels sur 400 pixels. Nous voyons deux lignes, la ligne du haut et la ligne du bas. La ligne du haut est composée d'une grande boîte à droite et de deux petites boîtes à gauche. Dans le fichier CSS, commençons par créer un sélecteur #id pour la ligne du haut. Parlons anglais et appelons ce sélecteur #toprow (top row signifie ligne du haut). Donnons lui une hauteur (height) de 290px. Regardons sur le schéma à quoi correspond cette valeur de 290px. La hauteur de la grande boîte correspond à la somme de la hauteur des deux boîtes de gauche (2 x 140px) et de leur séparation (+10px). Il n'est pas nécessaire de donner une valeur à la largeur de notre ligne #toprow car elle sera placée dans la <div> #painting qui a une largeur (width) de 400px. 5 / 12
6 Votre code CSS devrait ressembler à cela: #toprow { height: 290px; Dans le fichier HMTL, ajoutons une balise <div> avec une #id toprow. Votre code HTML devrait ressembler à cela: Si voulez vérifier le placement de notre div #toprow, vous pouvez lui ajouter temporairement une couleur de fond dans son style CSS avec la propriété background-color. Étape 4 : the big box Plaçons une de ces boîtes dont nous avons parlé. Commençons par la plus grande et la plus colorée du tableau : la grande boîte rouge en haut à droite. Dans le fichier CSS, ajoutons un nouveau sélecteur #id appelé #bigbox (grande boîte en anglais). Aidons-nous du schéma pour connaître sa hauteur (height) et sa largeur (width). Votre code CSS devrait ressembler à cela : #bigbox { width: 290px; height: 290px; Dans le fichier HTML, ajoutons une div avec une id bigbox à l intérieur de la div toprow. Votre code HTML devrait ressembler à cela : <div id="bigbox"> 6 / 12
7 Sauvegardez et regardez le résultat dans votre navigateur. Notre bigbox n'apparaît pas... Elle n'a pas encore de couleur mais vous pouvez vérifier sa présence en faisant un clic droit et en choisissant Inspecter l'élément ou Code source de la page. Étape 5 : un peu de couleur et un peu de "class" Nous pourrions donner de la couleur à notre bigbox en utilisant background-color dans son style CSS. Cela fonctionnerait parfaitement. Mais nous allons créer plusieurs boîtes qui auront la même couleur. Utilisons des "class" pour gagner du temps. Les "class" fonctionnent comme les "id". Elles permettent d'ajouter des styles CSS à différents éléments. Les "id" correspondent à un seul élément alors qu'une même "class" peut s'appliquer à plusieurs éléments. Nous comprendrons mieux tout cela en le mettant en pratique. Dans le fichier CSS, créons un nouveau sélecteur appelé red. À la place du dièse "#" que nous avons utilisé pour créer des "id", la ligne doit commencer par un point ".". Donnons à la classe.red un background-color "red"..red { background-color: red; Vous pouvez utiliser la notation hexadécimale de la couleur :.red { background-color: #cc3333; Dans le fichier HTML, ajoutons notre class.red à notre div #bigbox en ajoutant dans la balise ouvrante l'attribut class="red". <div id="bigbox" class="red"> Sauvegardez et regardez le résultat dans votre navigateur. Nous avons une grande boîte rouge! 7 / 12
8 Maintenant que nous savons comment fonctionnent les class, créons notre palette. Dans le fichier CSS, ajoutons les class.blue,. yellow,.black..red { background-color: red;.blue { background-color: blue;.yellow { background-color: yellow;.black { background-color: black; Vous pouvez choisir d'utiliser la notation hexadécimale qui permet un choix infini de couleurs et de nuances. Pour trouver la notation hexadécimale des couleurs, vous pouvez utiliser le plugin firefox Colorzilla. Étape 6 : Ça flotte à droite! Vous avez peut-être remarqué que la grande boîte rouge est du mauvais côté. Par défaut, les éléments d'une page web se placent à gauche. Il faut leur donner une position. Plaçons cette grande boîte au bon endroit. Il y a plusieurs manière de positionner un élément dans une page web. Nous allons utiliser une méthode appelée float. Cela permet de faire "flotter" les éléments vers la gauche ou vers la droite jusqu'à ce qu'ils cognent dans un élément fixe. Mettons cela en pratique. Dans le fichier CSS, créons une classe que nous appellerons.right (droit en anglais). Votre code CSS devrait ressembler à cela :.right { float: right; Dans le fichier HTML, ajoutons la class right à notre #bigbox. Il suffit d'ajouter "right" à côté de "red" dans l'attribut class. <div id="bigbox" class="red right"> 8 / 12
9 Étape 7 : les séparations Ajoutons une séparation verticale à gauche de la boîte rouge. Dans le fichier CSS, créons une nouvelle #id appelée #divider1. Donnons lui une hauteur (height) de 290px et une largeur (width) de 10px. #divider1 { height: 290px; width: 10px; Dans le fichier HTML, ajoutons notre div avec une #id divider1. Donnons lui la class right pour que notre séparation vienne se ranger à droite et la class black pour lui donner une couleur noire. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> Étape 8 : faire une colonne Nous allons nous occuper de la colonne située en haut en gauche du tableau. Dans cette colonne nous placerons trois div : deux div auront une class.mediumbox et une div, qui portera l'#id divider2, servira de séparation horizontale. Commençons par placer notre colonne en écrivant sous la div divider 1 une div avec une id "topleftcolumn" (en anglais qui signifie "colonne d'en haut à gauche"). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> 9 / 12
10 Continuons en plaçant une div de class "mediumbox" dans la div "leftcolumn". <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> Il reste encore deux div à placer. Sur une nouvelle ligne, sous la div "mediumbox", plaçons la div #divider2. Donnons lui une class "black". Terminons la structure HTML de notre colonne en plaçant notre deuxième div.mediumbox. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> Occupons-nous du style CSS de ces nouveaux éléments. Créons un style pour la class.mediumbox. Nous donnerons à toutes les div.mediumbox une largeur (width) de 100px et une hauteur (height) de 140px. Ajoutons un style pour la div #divider2. Nous lui donnerons une hauteur (height) de 10px et une largeur (width) de 100px. 10 / 12
11 Votre code CSS devrait ressembler à cela : mediumbox { width: 100px; height: 140px; #divider2 { height: 10px; width: 100px; Étape 9 : La séparation du milieu Créons une autre séparation noire sous notre div #toprow (notre ligne du haut). Donnons à notre div l'id "middlerow" (ligne du milieu en anglais). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> <div id="middlerow"> À vous d'écrire le code CSS pour donner à votre div les dimensions et la couleur qui conviennent. Étape 10 : Apportez la touche finale! À présent, vous êtes prêt pour coder vous-même cette dernière ligne. Il faut suivre la même démarche que pour la div #toprow. Ajoutons une div avec une id "bottomrow" (ligne du bas). À vous d'y placer les boîtes et les colonnes nécessaires. 11 / 12
12 Étape 11 : Mettez un peu de désordre. C'est fini? C'est beau, non? Peut-être qu'il est possible d'ajouter encore plus de divisions, des couleurs différentes et plus nombreuses. Vous savez désormais peindre avec du code. Bonus Du pixel au pourcentage (difficile) Remplacez l'unité de mesure dans le fichier css. Calculez les proportions du tableau en pourcentage et non plus en pixel. Commencez par remplacer 400px par 100% et lancez-vous dans l expérience. Broadway Boogie Woogie Vous aimez bien Mondrian? Regardez sur internet d autres œuvres de ce peintre et essayez d en reproduire une avec du code. Arriveriez-vous à programmer son œuvre «Broadway Boogie Woogie»? 12 / 12
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
.. 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
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?
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
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
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
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
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
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
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
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...
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
{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
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,
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
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
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
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
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
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...
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
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
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
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
Fête de la science Initiation au traitement des images
Fête de la science Initiation au traitement des images Détection automatique de plaques minéralogiques à partir d'un téléphone portable et atelier propose de créer un programme informatique pour un téléphone
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
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
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
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
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...
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024
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é
Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3
Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction
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
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
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
Spécifications techniques
Spécifications techniques Décembre2009 1. Récapitulatif des formats : p2 1. Formats classiques p2 2. Formats Rich Média p2 2. Emplacements : p3 1. Directions.fr p3 2. Newsletter Directions p4 3. Contraintes
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
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
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
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
Manuel d'utilisation du site Deptinfo (Mise en route)
Manuel d'utilisation du site Deptinfo (Mise en route) 1)Nouveautés apportées par le nouveau site...2 2) Accès à l espace privé... 3 a) Accès... 3 b) Identification... 3 c)page d accueil de l espace privé...4
Manuel utilisateur Netviewer one2one
Manuel utilisateur Netviewer one2one INDEX 1. Etablissement de la connexion...2 1.1. Client... 2 2. Travailler avec Netviewer en mode Show...3 2.1. Vue écran... 3 2.2. Le panneau Netviewer... 3 2.3. Caractéristiques...
Spécificités techniques JANVIER 2013
Spécificités techniques JANVIER 2013 Spécificités techniques des bannières de la newsletter 100%MEDIA Supermegabanner : Taille = 728x180 / Format = gif / Poids Max = 35Ko Important : - Un lien de redirection
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.
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
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
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
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
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 :
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
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%
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
LIVRET DE RÈGLES. @AsmadiGames. facebook.com/asmadigames
LIVRET DE RÈGLES @AsmadiGames facebook.com/asmadigames VOUS JOUEZ À RED La règle pour gagner au Rouge est simple : avoir la plus haute carte! Mais jouerez-vous toujours au même jeu lorsque votre tour prendra
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
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
Fiches d aide à l utilisation
alece.amd92.fr Un service proposé et géré par Liste des fiches d aide Fiche A. Se connecter à la plateforme... p. 3 Fiche B. Obtenir un code d accès pour la plateforme... p. 4 Fiche C. Rechercher des informations
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
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
Comment créer un diagramme de Gantt avec OpenOffice.org
Comment créer un diagramme de Gantt avec OpenOffice.org Version 1.9 du 05.05.2005 Réalisé avec : OOo 2.0 Plate-forme / Os : Toutes Distribué par le projet Sommaire 1 Une rapide introduction : Diagramme
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
Choisir entre le détourage plume et le détourage par les couches.
Choisir entre le détourage plume et le détourage par les couches. QUEL CHOIX D OUTILS ET QUELLE METHODE, POUR QUEL OBJECTIF? Il existe différentes techniques de détourage. De la plus simple à la plus délicate,
Auguria_PCM Product & Combination Manager
Auguria_PCM Product & Combination Manager Guide utilisateurs v1.5 Auguria 9, rue Alfred Kastler 44300 NANTES FRANCE +33251135012 contact@auguria.net Plan 1 Description générale du module...3 2 Mise en
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
"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"
"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS" BONNES FEUILLES OFFERTES PAR MA-EDITIONS : "OPTIMISER" - pages à 1 OPTIMISER Partir d'un modèle existant très bien... Mais c'est encore mieux quand on
Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
TP création et publication d'un site web statique
TP création et publication d'un site web statique Ce TP va se décomposer en trois parties. Dans un premier temps nous créerons un site web statique. Le site sera créé avec l'éditeur Amaya pour respecter
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
Organiser vos documents Windows XP
Organiser vos documents Windows XP Dossier? Fichier? Qu'est ce que c'est? Un dossier (autrement appelé répertoire) est un élément dans lequel on peut mettre d'autres dossiers, ou des fichiers (ou les 2).
Jean Dubuffet AUTOPORTRAIT II - 1966
Jean Dubuffet AUTOPORTRAIT II - 1966 MON VISAGE A LA MANIERE DE JEAN DUBUFFET OBJECTIFS - utiliser son expérience sensorielle visuelle pour produire une œuvre picturale. - réaliser une œuvre s'inspirant
IMAGINEZ UNE NOUVELLE FACON DE PEINDRE!
#THISISABSTRACT Elle a développé des tubes de peinture pour de Staël, et créé le pastel à l huile pour Picasso, Sennelier est une référence pour les artistes depuis 1887, date à laquelle Gustave Sennelier
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
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
Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur
Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur I- Ouverture d une nouvelle feuille de travail Fichier / Nouveau (ou ctrl + N) Indiquer dans la fenêtre qui s ouvre
Gestion de projet. GanttProject Didacticiel V1.0. 23 novembre 2013. Gérard Gervois Frédéric Giamarchi
Gestion de projet GanttProject Didacticiel V1.0 23 novembre 2013 Gérard Gervois Frédéric Giamarchi Département G.E.I.I. I.U.T. de Nîmes Université Montpellier II Présentation GanttProject est un logiciel
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
<Créer un site Web. avec/> Suzanne Harvey
aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca
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
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop
Modules Prestashop - ExportCatalogue / EXPORT IMPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0. 1 - Optim'Informatique
IMPORT / EXPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0 1 - Optim'Informatique Installation INSTALLATION Pour installer le module ExportProduits copier le répertoire exportcatalogue dans
Guide de configuration d'une classe
Guide de configuration d'une clae Viion ME Guide de configuration d'une clae Contenu 1. Introduction...2 2. Ajouter de cour...4 3. Ajouter de reource à une leçon...5 4. Meilleure pratique...7 4.1. Organier
Consigne : je remplis le tableau en tenant compte des informations de la ligne supérieure et de la colonne de gauche (droite pour les gauchers)
Découverte du monde : traiter deux informations Compétence : Savoir utiliser un tableau à double entrée. Matériel : - un plateau de jeu quadrillé : cinq lignes et cinq colonnes, - quatre pièces "couleur",
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,
Manuel d utilisation email NETexcom
Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La
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
Mode d emploi de la liseuse Kobo Aura
Mode d emploi de la liseuse Kobo Aura Vous avez emprunté une liseuse appartenant au réseau des bibliothèques de la Communauté de communes des Terroirs d Angillon et de la commune de St Michel de Volangis.
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
VOS PREMIERS PAS AVEC TRACENPOCHE
Vos premiers pas avec TracenPoche page 1/16 VOS PREMIERS PAS AVEC TRACENPOCHE Un coup d'oeil sur l'interface de TracenPoche : La zone de travail comporte un script, une figure, un énoncé, une zone d analyse,
PEPSITE EST COMPATIBLE UNIQUEMENT SUR IE10+
1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE. Nous utiliserons donc volontairement un vocabulaire et une méthode de travail accessibles à un public
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D.
Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. TABLE DES MATIÈRES I. Présentation de Joomla II. III. IV. Documents disponibles Installation de Joomla 3.1) Installation sur
Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Traitement de texte : Quelques rappels de quelques notions de base
Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui
Navigation dans Windows
Cours 03 Navigation dans Windows Comme je le disais en introduction, notre souris se révèle plus maligne qu'elle n'en a l'air. À tel point qu'il faut apprendre à la dompter (mais c'est très simple, ce
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
S.P.S.N. Lac du Der 2008
S.P.S.N. Lac du Der 2008 Qu'est-ce qu'un histogramme? C'est un graphique qui montre la répartition des pixels de l'image en fonction de leur luminosité. Chaque type d'image (normale, surexposée, sous exposée,