Classe de première SI CSS
|
|
|
- Camille Lamarche
- il y a 9 ans
- Total affichages :
Transcription
1 CSS Table des matières 1. La petite histoire du CSS Déclaration du CSS Fichier.css En-tête <head> du fichier HTML Directement dans les balises Appliquer un style Commentaires dans du CSS Style : class et id Les balises universelles Les sélecteurs avancés Formattage du texte Habillage Couleur du texte Couleur de fond Images de fond Les Bordures Apparences dynamiques Le modèle des boîtes...12 Dépassement de texte Le positionnement Les positionnements absolu, fixe et relatif Le positionnement inline-block Squelette de base HTML CSS css.odt 1
2 1. La petite histoire du CSS CSS (Cascading Style Sheets), permet de choisir la couleur du texte, la police utilisée, la taille du texte, les bordures, le fond et de faire la mise en page du site (menu à gauche, en-tête calé en haut, etc). Aux débuts du Web, CSS n'existait pas, il n'y avait initialement que le langage HTML. Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS. 2. Déclaration du CSS On peut écrire du code en langage CSS à trois endroits différents : dans un fichier.css (méthode la plus recommandée) ; dans l'en-tête <head> du fichier HTML ; directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée) Fichier.css On écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension.css. Cela nous évite de tout mélanger dans un même fichier. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>premiers tests du CSS</title> </head> <body> <h1>mon site</h1> <p>bonjour et bienvenue!</p> </body> 4-css.odt 2
3 </html> La ligne 5, <link rel="stylesheet" href="style.css" /> indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. Tout le site changera d'apparence En-tête <head> du fichier HTML Cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p color: blue; </style> <title>premiers tests du CSS</title> </head> <body> <h1>mon site</h1> <p>bonjour et bienvenue!</p> </html> Toute la page changera d'apparence Directement dans les balises Ajouter un attribut style à n'importe quelle balise et insérerez le code CSS directement dans cet attribut : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>premiers tests du CSS</title> </head> <body> <h1>mon site</h1> <p style="color: blue;">bonjour et bienvenue!</p> </body> </html> 3. Appliquer un style Dans un code CSS, on trouve trois éléments différents : Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. 4-css.odt 3
4 Des propriétés CSS : les «effets de style» de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte. Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Prenons le code CSS suivant : h1 em color: blue; color: blue; Il signifie que les titres <h1> et les textes importants <em> doivent s'afficher en bleu. Si les deux balises doivent avoir la même présentation, il suffit de combiner la déclaration en séparant les noms des balises par une virgule : h1, em color: blue; 3.1. Commentaires dans du CSS Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations. Taper /*, suivi de votre commentaire, puis */ pour terminer votre commentaire Style : class et id Pour que certains paragraphes seulement soient écrits d'une manière différente on utilise des attributs spéciaux qui fonctionnent sur toutes les balises : l'attribut class ; l'attribut id. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>premiers tests du CSS</title> </head> <body> <h1>mon super site</h1> <p class="introduction">bonjour et bienvenue!</p> </body> </html> Dans le CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous : 4-css.odt 4
5 .introduction color: blue; L'attribut id fonctionne exactement de la même manière que class mais il ne peut être utilisé qu'une fois dans le code. Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) : #introduction color: blue; 3.3. Les balises universelles Il existe deux balises dites universelles : <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau «bloc» dans la page et provoquent donc obligatoirement un retour à la ligne. Exemple : <p>bonjour et <span class="salutations">bienvenue</span>!</p>.salutations color: blue; 3.4. Les sélecteurs avancés Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. * : sélecteur universel * Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel. 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>. Notez qu'il n'y a pas de 4-css.odt 5
6 virgule entre les deux noms de balises. A + B : une balise qui en suit une autre h3 + p Sélectionne la première balise <p> située après un titre <h3>. A[attribut] : une balise qui possède un attribut a[title] Sélectionne tous les liens <a> qui possèdent un attribut title. Exemple : <a href=" title="infobulle"> A[attribut="Valeur"] : une balise, un attribut et une valeur exacte a[title="cliquez ici"] Idem, mais l'attribut doit en plus avoir exactement pour valeur «Cliquez ici». Exemple : <a href=" title="cliquez ici"> A[attribut*="Valeur"] : une balise, un attribut et une valeur a[title*="ici"] Idem, l'attribut doit cette fois contenir dans sa valeur le mot «ici» (peu importe sa position). Exemple : <a href=" title="quelque part par ici"> 4. Formattage du texte Pour modifier la taille du texte, on utilise la propriété CSS font-size. Exemple : p font-size: 14px; /* Paragraphes de 14 pixels */ Pour modifier la police utilisée, on utilise la propriété CSS font-family. p font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; 4-css.odt 6
7 Le navigateur essaiera d'abord d'utiliser la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif). Mettre en italique : font-style: italic; Mettre en gras : font-weight: bold; Soulignement et autres décorations : propriété CSS text-decoration qui peut prendre différentes valeurs : underline : souligné. line-through : barré. overline : ligne au-dessus. blink : clignotant. none : normal (par défaut). L'alignement : propriété CSS text-align et on indique l'alignement désiré : left : le texte sera aligné à gauche (c'est le réglage par défaut). center : le texte sera centré. right : le texte sera aligné à droite. justify : le texte sera «justifié». 5. Habillage Le CSS permet de faire flotter un élément autour d'un texte grâce à la propriété CSS float. left : l'élément flottera à gauche. right : l'élément flottera à droite. <p><img src="flash.gif" class="imageflottante" alt="image flottante" />.imageflottante float: left; Pour ne plus faire flotter l'élément, il faut utiliser la propriété clear, qui peut prendre ces trois valeurs : left : le texte se poursuit en-dessous après un float: left; right : le texte se poursuit en-dessous après un float: right; both : le texte se poursuit en-dessous, que ce soit 4-css.odt 7
8 après un float: left; ou après un float: right;. <p><img src="flash.gif" class="imageflottante" alt="image flottante" /></p> <p>texte écrit à côté de l'image.</p> <p class="dessous">texte écrit sous l'image.</p>.imageflottante float: left;.dessous clear: both; 6. Couleur du texte Il y a différentes façons d'indiquer la couleur : 1. Indiquer le nom de la couleur Propriété color, suivie d'un des seize noms de couleurs utilisables en CSS (white, black, red, yellow, blue, ). Exemple : color: maroon 2. Indiquer le code couleur Propriété color, suivie des codes couleur RGB 1. Exemple : color: rgba(240, 96, 204, 0); Certains logiciels de retouche d'image permettent de trouver la couleur désirée (ex : paint). Remarque : le dernier paramètre indique la transparence et a une valeur comprise entre 0 et 1 (ainsi, pour une valeur de 0.6, le texte sera opaque à 60%). 1 Red Green Blue (Rouge Vert Bleu) 4-css.odt 8
9 7. Couleur de fond Pour indiquer une couleur de fond, utiliser la propriété CSS background-color et elle s'utilise de la même manière que la propriété color. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Exemple : body background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ 8. Images de fond La propriété permettant d'indiquer une image de fond est background-image. Exemple : background-image: url("neige.png"); La propriété CSS background-attachment permet de «fixer» le fond. Deux valeurs sont disponibles : fixed : l'image de fond reste fixe ; 4-css.odt 9
10 scroll : l'image de fond défile avec le texte (par défaut). La propriété CSS background-repeat permet de «répéter» le fond. Quatre valeurs sont disponibles : 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). La propriété CSS background-position permet d'indiquer où doit se trouver l'image de fond. Deux valeurs sont disponibles : en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page utiliser les valeurs : top, bottom, left, center, right Exemple : body background-image: url("soleil.png"); background-attachment: fixed; /* Le fond restera fixe */ background-repeat: no-repeat; /* Le fond ne sera pas répété */ background-position: top right; /* Le fond sera placé en haut à droite */ Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci : body background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; La première image de cette liste sera placée par-dessus les autres. Attention donc, l'ordre de déclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS précédent, vous ne verrez plus le soleil! 4-css.odt 10
11 9. Les Bordures Classe de première SI Pour modifier l'apparence des bordures il faut utiliser la propriété border qui combine plusieurs valeurs. 1. la largeur en pixels 2. la couleur (cf couleur du texte) 3. le type de bordure avec différentes valeurs disponibles : none : pas de bordure (par défaut) ; solid : un trait simple ; dotted : pointillés ; dashed : tirets ; etc... Exemple : border: 3px blue dashed; Pour ne modifier qu'une bordure, utiliser les propriétés : border-top : bordure du haut ; border-bottom : bordure du bas ; border-left : bordure de gauche ; border-right : bordure de droite. Pour obtenir des bordures arrondies, utiliser la propriété border-radius en indiquant la taille de l'arrondi en pixels. Exemple : border-radius: 10px; 10. Apparences dynamiques En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats. 4-css.odt 11
12 :hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus). :active applique un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens. :focus applique un style lorsque l'élément est sélectionné. :visited applique un style à un lien vers une page qui a déjà été vue. Exemple : p:hover /* Apparence au survol des paragraphes */ text-decoration: underline; color: green; 11. Le modèle des boîtes Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes. Chacune de ces boîtes est constituée d un contenu, d un espacement intérieur, d une bordure, et d une marge externe. Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de chacun de ses constituants : Propriété CSS Ce qui est concerné : width et height padding border margin largeur et hauteur du contenu (texte, image, etc.) espacement intérieur, entre le contenu et la bordure bordure (ou encadrement) marge externe, espace (transparent) entourant le tout 4-css.odt 12
13 width : c'est la largeur du bloc exprimé en pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc exprimé en pixels (px) ou en pourcentage (%). padding : indique la taille de la marge intérieure en pixels (px). margin : indique la taille de la marge extérieure en pixels (px). 1. Un bloc peut avoir des dimensions minimales et maximales : min-width : largeur minimale ; min-height : hauteur minimale ; max-width : largeur maximale ; max-height : hauteur maximale. 2. Les marges extérieures peuvent avoir des valeurs différentes : margin-top : marge extérieure en haut ; margin-bottom : marge extérieure en bas ; margin-left : marge extérieure à gauche ; margin-right : marge extérieure à droite. 3. Idem pour les marges intérieures! Exemple : p width: 350px; border: 1px solid black; text-align: justify; padding: 12px; margin: 50px; /* Marge extérieure de 50px */ Remarque : utiliser la propriété margin: auto pour centrer des blocs. Pour cela, il faut obligatoirement donner une largeur au bloc (avec la propriété width). Exemple : p width: 350px; /* On a indiqué une largeur (obligatoire) */ margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */ 4-css.odt 13
14 Dépassement de texte Si vous voulez que le texte ne dépasse pas des limites du bloc, il va falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter : visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc. hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte. scroll : le texte 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 texte. auto : le navigateur décide de mettre ou non des barres de défilement. Remarque : la propriété word-wrap: break-word permet de forcer la césure des très longs mots (généralement des adresses un peu longues). 12. Le positionnement Les positionnements absolu, fixe et relatif La propriété CSS position permet de positionner avec précision des éléments sur la page. Pour cela, on lui donne une de ces valeurs : absolute : positionnement absolu ; il permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.). fixed : positionnement fixe ; identique au positionnement absolu mais, cette fois, l'élément reste toujours visible, même si on descend plus bas dans la page. relative : positionnement relatif ; ce positionnement permet d'effectuer des «ajustements» : l'élément est décalé par rapport à sa position initiale. Si un bloc est positionné en absolu, il faut indiquer au navigateur où le positionner sur la page à l'aide des quatre propriétés CSS : left : position par rapport à la gauche de la page ; right : position par rapport à la droite de la page ; top : position par rapport au haut de la page ; bottom : position par rapport au bas de la page. 4-css.odt 14
15 Exemple : element position: absolute; right: 0px; bottom: 0px; Remarque : les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page! 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 audessus des autres. L'élément ayant la valeur de z-index la plus élevée sera placé par dessus les autres, comme le montre la figure ci-contre Le positionnement inline-block En CSS la propriété display permet de transformer n'importe quel élément de la page d'un type vers un autre et les faire apparaître sous forme de blocs. À ce moment-là, les éléments vont se positionner les uns en-dessous des autres et il devient possible de modifier leurs dimensions! Voici quelques-unes des principales valeurs que peut prendre la propriété display : Valeur Exemples Description inline <a>, <em>, <span> Eléments d'une ligne. Se placent les uns à côté des autres. block <p>, <div>, <section> Eléments en forme de blocs. Se placent les uns endessous des autres et peuvent être redimensionnés. inline-block <select>, <input> Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être redimensionnés (comme les blocs). none <head> Eléments non affichés. Les éléments en inline-block nous permet d'utiliser la propriété vertical-align. Cette propriété permet de modifier l'alignement vertical des éléments. Voici quelques-unes des valeurs possibles pour cette propriété : baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ; 4-css.odt 15
16 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). NB : les éléments inline-block se positionnent sur une même ligne de base (appelée baseline), en bas. Exemple : nous voulons réaliser la page suivante. Donnons le code HTML correspondant... <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>zozor - Le Site Web</title> </head> <body> <header> 4-css.odt 16
17 <h1>zozor</h1> <h2>carnets de voyage</h2> </header> <nav> <ul> <li><a href="accueil.html">accueil</a></li> <li><a href="blog.html">blog</a></li> <li><a href="cv.html">cv</a></li> </ul> </nav> <section> <aside> <h1>à propos de l'auteur</h1> <p>c'est moi, Zozor! Je suis né un 23 novembre 2005.</p> </aside> <article> <h1>je suis un grand voyageur</h1> <p>bla bla bla bla (texte de l'article)</p> </article> </section> <footer> <p>copyright Zozor - Tous droits réservés <a href="mailto:[email protected]">me contacter!</a></p> </footer> </body> </html>...et le code CSS associé. nav display: inline-block; width: 150px; border: 1px solid black; vertical-align: top; section display: inline-block; border: 1px solid blue; vertical-align: top; 4-css.odt 17
18 13. Squelette de base HTML CSS Classe de première SI Le squelette d une page web possède souvent une structure de base à cinq blocs principaux. Cette structure de base à cinq blocs principaux convient dans la majorité des cas, car elle permet de fabriquer une grande variété de mises en page. <!DOCTYPE html> HTML /* Mes styles */ CSS <html> <head> <title>titre de la page</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="header">en-tête</div> <div class="nav">navigation</div> <div class="content">contenu</div> <div class="aside">contexte</div> <div class="footer">pied de page</div> </body> </html>.header..nav..content..aside..footer. Il existe sur le web des collections de modèles de mise en page, à télécharger gratuitement. Exemple : «Layout Gala» 4-css.odt 18
.. 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
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
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
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
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
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
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
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE [email protected] 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
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
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
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
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...
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
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
Responsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps.
Cours pratique Excel Présentation du classeur cours.xls C est un classeur qui contient 7 feuilles Liste de personnes Calculs simples Solde Listes Auto Relatif Absolu Formats Paye Cours AFM Dans chacune
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...
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
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
Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons
Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4
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é
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
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire [email protected] Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
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
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
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
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
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
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,
Guide 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
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
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 &
Administration du site (Back Office)
Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte
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,
Dé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
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
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
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
Le service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
www.imprimermonlivre.com
0 www.imprimermonlivre.com Composition d une couverture avec Word L objectif de ce guide est de vous proposer un mode opératoire pour créer une couverture avec Word. Nous vous rappelons toutefois que Word
Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:
1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web
SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : [email protected]. 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 : [email protected] Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site
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.
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
Comment insérer une image de fond?
COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document
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
Création d articles sur le site web du GSP
Création d articles sur le site web du GSP Mode d emploi pour les membres du groupe spéléo Porrentruy. www.speleoporrentruy.ch 1 Article avec photo et document pdf sur le site du groupe spéléo Porrentruy
Comment 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
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...
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
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
Stage «Créer et animer un site Web en équipe»
Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs
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
PHPWEBSITE -Tutoriel image
PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Publication 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.
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
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
Plan. Avant de créer son site. Quelques logiciels complémentaires
Internet, créer son site personnel. Yves Roger Cornil Microcam06, Fréjus Vous Accueille 7 mars 2005 Plan Pourquoi publier sur Internet? Quelques prérequis et quelques logiciels Combien ça coûte? Rappels
Utiliser le logiciel Photofiltre Sommaire
Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner
L informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
Bientôt la rentrée!...personnaliser et configurer un ordinateur pour faciliter son utilisation en classe
Bientôt la rentrée!......personnaliser et configurer un ordinateur pour faciliter son utilisation en classe Tout comme l'achat des fournitures scolaires, la préparation de l'ordinateur s'effectue avant
"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
Edition de sites Jahia 6.6
Sommaire Edition de sites Jahia 6.6 documentation temporaire en attendant la finalisation de la documentation en ligne Ligne graphique Débuter l'édition Interface utilisateur Astuces de publication Boîte
1 Comment faire un document Open Office /writer de façon intelligente?
1 Comment faire un document Open Office /writer de façon intelligente? 1.1 Comment fonctionne un traitement de texte?: les balises. Un fichier de traitement de texte (WRITER ou WORD) comporte en plus du
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
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
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
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
Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com
demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des
Débuter avec Excel. Excel 2007-2010
Débuter avec Excel Excel 2007-2010 Fabienne ROUX Conseils & Formation 10/04/2010 TABLE DES MATIÈRES LE RUBAN 4 LE CLASSEUR 4 RENOMMER LES FEUILLES DU CLASSEUR 4 SUPPRIMER DES FEUILLES D UN CLASSEUR 4 AJOUTER
AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 [email protected] 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
Comment mettre en page votre livre
GUIDE - ImprimermonLivre.com Comment mettre en page votre livre www.imprimermonlivre.com 1 V. 20131125 Conseils pour la mise en page de votre ouvrage L objectif de ce guide est de vous aider à réaliser
FrontPage Support d apprentissage septembre 2000
FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des
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
Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
Manuel du gestionnaire
Manuel du gestionnaire ENT MESTEK v.2010 Ce manuel s adresse à l équipe administrative d un établissement scolaire : principal, principal adjoint, secrétaires dans un collège, proviseur, proviseur adjoint,
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
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
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
Créer votre propre modèle
Créer votre propre modèle Vous recherchez un modèle personnalisé pour vos présentations Microsoft PowerPoint qui comprend le nom de votre organisation et un arrière-plan unique avec les couleurs et les
Cours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
Assemblage couleur & trait en InDesign pour fichier Acrobat - 1
Assemblage couleur & trait en InDesign pour fichier Acrobat Méthode de travail pour juxtaposer le trait aux couleurs en InDesign - Trait à 600 ou 1200 dpi suivant le genre (ligne claire = 1200 trait noir
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
Création d un site web avec Nvu
Création d un site web avec Nvu sources principales d'informations: http://www.framasoft.net/article2656.html http://info.sio2.be/nvu/index.php http://www.anseladams.com Pensez à sauvegarder fréquemment
Interface PC Vivago Ultra. Pro. Guide d'utilisation
Interface PC Vivago Ultra Pro Guide d'utilisation Version 1.03 Configuration de l'interface PC Vivago Ultra Configuration requise Avant d'installer Vivago Ultra sur votre ordinateur assurez-vous que celui-ci
Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7
Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7 L animation est obtenue par défilement des images décomposant le mouvement de traçage de la signature. Les étapes successives seront : 1. Choix de la
COPIER, COUPER, COLLER, SELECTIONNER, ENREGISTRER.
COPIER, COUPER, COLLER, SELECTIONNER, ENREGISTRER. 1. Comment déplacer ou copier un fichier sur Windows Vous aurez régulièrement besoin de déplacer ou dupliquer des fichiers sur votre ordinateur. Par exemple