Création d un Site Web
|
|
- Camille Leroux
- il y a 8 ans
- Total affichages :
Transcription
1 Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1
2 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient de compléter le HTML. Gérer la mise en forme de votre site. Utilité et avantages D'avoir une présentation homogène sur tout un site. Modifier l'aspect d'une page ou d'un site sans modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises. Réduire le temps de chargement des pages Un "langage" neuf, compréhensible et logique par rapport au Html 2
3 Page Web Sans CSS Page Web Avec CSS 3
4 Syntaxe d'un style La syntaxe de base d'un style est simple : balise propriété de style1: valeur; propriété de style2: valeur; propriété de style3: valeur; Exemple : H3 font-family: Arial; font-style: italic Donc ici, la balise H3 sera en Arial et en italique. Et dans la page Web, toutes les balises <H3> auront comme style Arial et italique. 4
5 Où écrit-on le CSS? Vous avez le choix car on peut écrire du code en langage CSS à deux endroits différents : Style Interne : dans l'en-tête <head> et </head>du fichier HTML ; Style Externe : dans un fichier.css (méthode la plus recommandée) ; Style Interne : <HTML> <HEAD> <STYLE type="text/css"> La ou les feuille(s) de style </STYLE> </HEAD> <BODY>... </BODY> </HTML> <HTML> <HEAD> <STYLE type="text/css"> h3 font-family: Arial; font-style: italic ; Color : Blue ; </STYLE> </HEAD> <BODY> <h3>text en blue en arial et italique</h3> </BODY> </HTML> 5
6 Style Externe 1. On crée d'abord, dans le répertoire du site, un fichier avec l'extension.css soit styles.css qui contiendra toutes les feuilles de style. 2. On fait l appel de ce fichier <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="styles.css"> <\HEAD> Exemple : Index.html <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="styles.css"> </HEAD> <BODY> <h3>text en blue en arial et italique</h3> </BODY> </HTML> h3 Styles.css font-family: Arial; font-style: italic ; Color : Blue ; 6
7 Quelle méthode choisir? Le code CSS est répété dans chaque fichier HTML 7
8 Quelle méthode choisir? Le code CSS est donné une fois pour toutes dans un fichier CSS 8
9 Problème! Comment mettre en forme uniquement le mot «bienvenue» dans le paragraphe suivant: <p>bonjour et bienvenue sur mon site!</p> Solution : Cela serait facile à faire s'il y avait une balise autour de «bienvenue» mais, malheureusement il n'y en a pas. Par chance, on a Deux balises qui-ne-ser-à-rien. <span> </span> <div> </div> <p>bonjour et <span class="salutations">bienvenue</span> sur mon site!</p> <div>(boîte ou conteneur) est une balise fréquemment utilisée dans la construction d'un design 9
10 Notion de classes Les feuilles de style proposent la solution des classes [class] pour affecter plusieurs styles à une même balise Exemple: Code Html <p class="introduction">bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>.patientez encore un peu!</p> Code Css.introduction color: blue; 10
11 Notion Id Fonction de la même manière qu une classe,la seul différence est que l id exploite une seul fois dans une balise.class. #id. 11
12 Les sélecteurs avancés A B : une balise contenue dans une autre h3 em Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> Exemple : <h3>titre avec <em> important</em></h3> 12
13 Les sélecteurs avancés A[attribut] : une balise qui possède un attribut a[title] Exemple : Sélectionne tous les liens <a> qui possèdent un attribut title. <a href=" title="infobulle"> 13
14 Taille du font-size : Taille ; Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci: xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très grand ; xx-large : euh gigantesque. On peut indiquer la taille en «em». Si vous écrivez 1em, le a une taille normale. Si vous voulez grossir le, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em. Si vous voulez réduire le, inscrivez une valeur inférieure à 1, comme 0.8em. 14
15 Exemple p font-size: 0.8em; h1 font-size: 1.3em; balise font-family: police; Taille du La police 15
16 Italique, gras, souligné font-style :valeur ; italic : le sera mis en italique. oblique : le sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit). normal : le sera normal Soulignement et autres décorations text-decoration : valeur ; underline : souligné. line-through : barré. overline : ligne au-dessus. blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment). none : normal (par défaut). 16
17 L'alignement text-align :valeur ; left : le sera aligné à gauche (c'est le réglage par défaut). center : le sera centré. right : le sera aligné à droite. justify : le sera «justifié». Justifier le permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les s des journaux, par exemple, sont toujours justifiés. Les flottants Flotter(habillage) un élément autour du float : valeur ; left : l'élément flottera à gauche. right : l'élément flottera à droite! Oui, bravo. 17
18 Exemple: Code Html <p><img src="flash.gif" class="imageflottante" alt="image flottante»/> Ceci est un normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p> Code CSS.imageflottante float: left; Remarque : Pour stopper le float on exploite la proprièté clear, Clear. both ; both : le se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;. 18
19 La couleur et le fond Couleur de fond background-color : couleur ; body background-color: black; color: white; Images de fond background-image : url("nom_de_l_image.png") body background-image: url("neige.png"); 19
20 La couleur et le fond répétition du fond background-repeat background-repeat : valeur; no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page. repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement. repeat-y : le fond sera répété uniquement sur la première colonne, verticalement. repeat : le fond sera répété en mosaïque (par défaut). background-position background-position : valeur ; top : en haut ; bottom : en bas ; left : à gauche ; center : centré ; right : à droite. Remarque : background-position: 30px 50px; votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut 20
21 La couleur et le fond Remarque : Plusieurs images de fond body background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; Opacity opacity: valeur; Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut. Avec une valeur de 0, l'élément sera totalement transparent. Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60% et on verra donc à travers! 21
22 Les différents styles Bordures standard Border : border-width border-color border-style; La couleur et le fond Les bordures et les ombres Si vous voulez mettre des bordures différentes en fonction du côté border-top : bordure du haut ; border-bottom : bordure du bas ; border-left : bordure de gauche ; border-right : bordure de droite. 22
23 La couleur et le fond Les bordures et les ombres Bordures arrondies Border-radius : Taille en px; On peut aussi préciser la forme de l'arrondi pour chaque coin: Border : haut gauche haut droite haut gauche haut droite; Exemple : P border-radius: 10px 5px 10px 5px; 23
24 La couleur et le fond Les bordures et les ombres Les ombres box-shadow : valeur; La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant : 1. le décalage horizontal de l'ombre ; 2. le décalage vertical de l'ombre ; 3. l'adoucissement du dégradé ; 4. la couleur de l'ombre. On peut aussi préciser la forme de l'arrondi pour chaque coin: Exemple : P box-shadow: 6px 6px 0px black; 24
25 La couleur et le fond CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-àdire que des éléments peuvent changer de forme. Changer l'apparence : Au survol : quand on pointe dessus; Lors du clic ; Lors du focus (élément sélectionné) ; Lorsqu'un lien a été consulté. Les bordures et les ombres Apparences dynamiques Au survol a:hover Lors du clic a:active Lors du focus a:focus Le lien a été consulté a:focus 25
26 Structuration de la page Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page 26
27 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le modèle des boîtes Une page web peut être vue comme une succession et un empilement de boîtes, qu'on appelle «blocs». La plupart des éléments vus au chapitre précédent sont des blocs : <header>, <article>, <nav> Mais nous connaissions déjà d'autres blocs : les paragraphes <p>, les titres <h1> On distingue deux principaux types de balises en HTML : Le type block (<p>, <h1> ) : ces balises créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas. Le type inline (<a>, <strong> ) : ces balises délimitent du au milieu d'une ligne. Elles se suivent de gauche à droite. Les dimensions width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%). 27
28 La couleur et le fond Les bordures et les ombres Apparences dynamiques Le modèle des boîtes Les dimensions width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%). Remarque: Pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs : min-width : largeur minimale ; min-height : hauteur minimale ; max-width : largeur maximale ; max-height : hauteur maximale. La mise en page Exemple width: 50%; min-width: 400px; 28
29 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Les marges Le modèle des boîtes Il faut savoir que tous les blocs possèdent des marges. Il existe deux types de marges : les marges intérieures : margin : taille en px ; les marges extérieures: padding : taille en px ; Regardez bien le schéma qui se trouve à la figure suivante. Marge externe (Margin-left) Marge externe (Margin-top) Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Marge interne Marge interne (Padding-right) (Padding-bottom) Bloc Conteneur 29
30 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le modèle des boîtes Remarque: On peut préciser les marges aux quatre côté : padding-top : marge intérieure en haut ; padding-bottom : marge intérieure en bas ; padding-left : marge intérieure à gauche ; padding-right : marge intérieure à droite. Centrer les blocs Pour centrer, il faut respecter les règles suivantes : 1. donnez une largeur au bloc (avec la propriété width) ; 2. indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto; Exemple : p width: 350px; /* On a indiqué une largeur (obligatoire) */ margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */ margin-bottom: 20px; Border : red 2px solide ; 30
31 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Overflow : couper un bloc Le modèle des boîtes Pour contrôler les dépassements d un qui se trouve à l intérieur d un bloc. Overflow : valeur ; visible (par défaut) : si le dépasse les limites de taille, il reste visible et sort volontairement du bloc. hidden : si le dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le. scroll : là encore, le sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du. C'est un peu comme un cadre à l'intérieur de la page. auto : c'est le mode «pilote automatique». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent. word-wrap : couper les s trop larges p word-wrap: break-word; 31
32 La couleur et le fond Le positionnement en CSS Display Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. display : valeur ;. Les bordures et les ombres Apparences dynamiques La mise en page 32
33 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Vertical-align Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. Vertical-align : valeur ;. baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ; top : aligne en haut ; middle : centre verticalement ; bottom : aligne en bas ; valeur en px ou %: aligne à une certaine distance de la ligne de base (baseline). Exemple : nav display: inline-block; width: 150px; border: 1px solid black; vertical-align: top; section display: inline-block; border: 1px solid blue; vertical-align: top; 33
34 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Le positionnement absolu Le positionnement absolu permet de placer un élément (réellement) n'importe où sur la page. Pour effectuer un positionnement absolu, on doit écrire : position: absolute; Il faut donc utiliser la propriété position et au moins une des quatre propriétés ci-dessus (top, left, right ou bottom). Si on écrit par exemple : position: absolute; right: 0px; bottom: 0px; Remarque: Par ailleurs, si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas, utilisez la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres.. 34
35 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Le positionnement fixe Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc reste fixe à sa position, même si on descend plus bas dans la page. position: fixe; Le positionnement relatif Le positionnement relatif permet de décaler un bloc par rapport à sa position normale. position: relatif; 35
36 Mise en page adaptative avec les Media Queries Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> Exemple : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde --> <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px --> <title>media queries</title> </head> 36
37 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries Chargement des règles directement dans la feuille de screen and (max-width: 1280px) /* Rédigez vos propriétés CSS ici */ /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px screen and (max-width: 1280px) /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px all and (min-width: 1024px) and (max-width: 1280px) /* Sur les téléviseurs tv /* Sur tous types d'écrans orientés verticalement all and (orientation: portrait) 37
38 TP : création d'un site pas à pas La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries TP 38
39 Nos cordonnées: Mounir Ahlyege 39
40 On vous remerciez vivement pour votre collaboration Mounir Ahlyege
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Plus en détailFormation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Plus en détailLES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
Plus en détailJOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
Plus en détailHTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
Plus en détailTutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
Plus en détail1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Plus en détailRESPONSIVE 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
Plus en détailTravaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
Plus en détailMedia 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
Plus en détailUN 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
Plus en détailInitiation à 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
Plus en détailGrille 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
Plus en détailRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Plus en détailPour 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
Plus en détailResponsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
Plus en détail{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Plus en détailKompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Plus en détailE-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Plus en détailIntroduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Plus en détailInté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
Plus en détailFreeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
Plus en détailResponsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Plus en détailSTID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Plus en détailGuide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Plus en détailResponsive Web Design. Responsive Design avec HTML 5.0 et CSS3
Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction
Plus en détailHTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
Plus en détail3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Plus en détailPré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...
Plus en détailTP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Plus en détailUtilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Plus en détailSOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
Plus en détailTP 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
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détailLe 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
Plus en détailOptimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Plus en détailDécouvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice
Comment optimiser et formater votre ebook avec OpenOffice Le blog : http://www.vendre-sur-kindle.com 1 Découvrir OpenOffice : comment optimiser et formater votre ebook avec OpenOffice 2013 Le blog : http://www.vendre-sur-kindle.com
Plus en détail101 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
Plus en détailTP 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,
Plus en détailGuide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
Plus en détailComment formater votre ebook avec Open Office
Comment formater votre ebook avec Open Office 1 2012 Nicolas Boussion Tous droits réservés. Important : ce livre numérique, comme toute œuvre de l'esprit, fait l'objet de droits d'auteur. Son contenu a
Plus en détailClient / Serveur. Rémy Courdier. Normes et Standards. C/S et l Internetl
Client / Serveur Rémy Courdier Normes et Standards C/S et l Internetl Normes et Standards du Client-Serveur de l Internetl Introduction L immense force d un vrai standard Site, Système et Application Web
Plus en détailTapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
Plus en détailÉdu-groupe - Version 4.3
Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les
Plus en détailGuide 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
Plus en détailLuc Brun. Création de pages Web Dynamiques p.1/75
Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75 Place du HTML GET http://www. monssite.com HTTP 1.0 Content type: text/html ... Création de pages Web Dynamiques
Plus en détailNormes 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
Plus en détailCréation de site Internet avec Jimdo
Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que
Plus en détailHTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Plus en détailZen, 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
Plus en détailCRÉ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
Plus en détailSommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Plus en détailNotes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Plus en détailqwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
Plus en détailChapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Plus en détailPEPSITE 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
Plus en détailDé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
Plus en détailInformatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
Plus en détailCré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
Plus en détailRAPPORT 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
Plus en détailGUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de
Plus en détailCSS : on reprend tout à zéro! Par Joe Gillespie
1 sur 31 CSS : on reprend tout à zéro! Par Joe Gillespie Document original : http://www.pompage.net/pompe/cssdezero-1/ Pompage de Copyright 1996-2007 WPDFD, LTD : http://www.wpdfd.com/issues/70/css_from_the_ground_up/
Plus en détailChapitre 2 Créer son site et ses pages avec Google Site
Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail
Plus en détailStage «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
Plus en détailBernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Plus en détailAlain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com
Alain DI MAGGIO Mise à jour sur le site 11/01/10 http://www.admexcel.com TABLE DES MATIERES L UTILISATION DES RUBANS... 3 LE CLASSEUR... 3 RENOMMER LES FEUILLES DU CLASSEUR... 3 SUPPRIMER DES FEUILLES
Plus en détailENVOI 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
Plus en détailTUTORIEL CartoDB www.cellie.fr 11/03/15
TUTORIEL CartoDB www.cellie.fr 11/03/15 1 INTRODUCTION Issue de la technologie du cloud, CartoBD est une application créée par la société Vizzuality. Elle permet de réaliser des cartographies à partir
Plus en détailOptimiser 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
Plus en détailSupport 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
Plus en détailL informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
Plus en détailManuel 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
Plus en détailCréation de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
Plus en détailOuvrir le compte UQÀM
Cliquez sur le titre pour visionner 1 Cliquez sur le titre pour visionner 2! Préliminaires! Ouvrir le compte UQÀM! Accéder au compte UQÀM! Paramètres de configuration! Les dossiers! Gérer les dossiers!
Plus en détailChapitre IX. L intégration de données. Les entrepôts de données (Data Warehouses) Motivation. Le problème
Chapitre IX L intégration de données Le problème De façon très générale, le problème de l intégration de données (data integration) est de permettre un accès cohérent à des données d origine, de structuration
Plus en détailDETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran
DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT
Plus en détailLe 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
Plus en détailLe service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
Plus en détailVOCABULAIRE 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
Plus en détailAGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var - E mail : bij@agasc.fr / Tel : 04.93.07.00.66 CONSIGNE N 1 :
CONSIGNE N 1 : Rédiger puis envoyer un nouveau message La fenêtre de la boîte de messagerie s affiche Cliquer sur «Ecrire» ou «Nouveau message» pour ouvrir cette nouvelle fenêtre. Ensuite, suivre cette
Plus en détailPRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE
PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,
Plus en détailManuel de prise en mains Web Creator Pro 6
Manuel de prise en mains Web Creator Pro 6 Table des matières Les nouveautés de Web Creator Pro 6... 3 Une nouvelle interface... 3 La barre d accès rapide... 4 Le Ruban de commandes... 4 La Liste des éléments...
Plus en détailPack 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é
Plus en détailPrise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
Plus en détailPublication Assistée par Ordinateur
Présentation OpenOffice Draw est l'outil de dessin vectoriel de la suite bureautique OpenOffice. De fait, Draw permet de réaliser certains documents comparables à ceux de Publisher, le logiciel de P.A.O.
Plus en détailAGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.
Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment
Plus en détailPréambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO
Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail
Plus en détailTraitement 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
Plus en détail<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
Plus en détailCONCEPTION 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,
Plus en détailUn 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,
Plus en détailAvant-propos Keith Martin Senior Lecturer London College of Communication
Manuel Freeway 6 Avant-propos Félicitations pour avoir choisi Freeway, l application la plus orientée vers le design des sites Web. Avant de commencer il est important de comprendre comment Freeway travaille
Plus en détailMon 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
Plus en détailConfigurer la publication de votre site
Avant toute chose, vous devez créer un espace Web et lui attribuer un nom pour le retrouver facilement à l'ouverture de Web Acappella. Un espace Web est un système qui comprend les paramètres de publication
Plus en détailIntroduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield...
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de mini-projet Slax sur clé USB PAITEL Arnaud Montouchet Yohann Responsable : François Lecellier 2 e semestre 2006-2007
Plus en détailHTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles
46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes
Plus en détail