Mise en page avec CSS
|
|
|
- Raphaël Mathieu
- il y a 7 ans
- Total affichages :
Transcription
1 Mise en page avec CSS CSS ne sert pas uniquement à formater le texte et afficher des images de fond. Si on se concentrait un peu sur les tâches de base de mise en page? Bienvenue dans le monde du positionnement. (règles contenant position et ou float) Ce sont les mots clé pour réaliser la mise en page en colonnes, faire se superposer certains éléments (imaginez les éléments des menus déroulants qui vont se superposer au texte le temps d'effectuer une sélection), bref effectuer de manière agile et souple ce que les développeurs du Web on si souvent réalisé avec la balise table du langage HTML. L'idée sous-jacente du positionnement est assez simple. Considérez que vous travaillez avec des boîtes. Souvenez-vous que les éléments de type boîte en HTML occupent en principe un ligne à eux seuls (sauf indication contraire dans le style du document). Les éléments de type boîte peuvent contenir d'autres éléments de type boîte, ainsi que des éléments inline.
2 Représentation d une boîte margin-top bord externe supérieur border-top bord externe gauche margin-left border-left padding-left bord interne gauche bord interne supérieur bord interne inférieur padding-bottom padding-top padding-right bord interne droit border-right margin-right bord externe droit border-bottom bord externe inférieur margin-bottom C'est le cas par exemple des balises suivantes: h1, h2, h3, h4, h5, h6, p, div, pre, blockquote, table, ol, ul, form, fieldset, dl, center. On a aussi l'habitude de considérer les balises suivantes comme étant de type boîte: li, dd, dt, frameset, td, th, tr, tbody, tfoot, thead. La raison de cette classification vient du fait que ces élément peuvent à leur tour contenir d'autres éléments de type boîte.
3 Les éléments restants sont essentiellement des éléments de type "inline", c'est-à-dire au fil du texte, même si certains peuvent à nouveau être pris comme de type boîte à condition de ne contenir que des éléments au fil du texte. Restons-en aux éléments de type boîte, car le positionnement est affaire d'éléments de type boîte. Définir le positionnement d'une boîte revient à spécifier exactement où cette boîte doit se trouver, par rapport à l'endroit où elle se trouverait au fil du texte, ou bien par rapport à la boîte dans laquelle elle se trouve, ou par rapport à un autre élément, ou même par rapport aux bords (internes) de la fenêtre du navigateur. La notion de flottement, elle, est un peu différente du positionnement. Nous verrons bientôt les situations où le flottement vient au secours des mises en pages pour les rendre plus fluides et moins rigides qu'avec des tableaux.
4 Flottement CSS permet de faire flotter n'importe quel élément, des images aux paragraphes en passant par les listes. L'élément par excellence sujet au flottement est la division (div). Par exemple, pour faire migrer une image vers la gauche d'un paragraphe alors qu'elle est définie au milieu du texte, on procédera comme suit: <img src="image1.jpg" style="float:left;" alt="tempête de couleurs"> L'illustration ci-dessous montre bien que le texte épouse les formes de l'image et que l'image est collée au bord gauche de la boîte dans laquelle elle a été déclarée; le body, un élément p, ou une div par exemple. Illustration 1 float:left float:right float:none
5 Les éléments dont la propriété float a été définie sont extraits du fil normal du texte du document (pour être plus précis, c'est de l'élément conteneur qu'ils sont extraits). Ces éléments ont une influence sur ce qui les entoure. La boîte qui contient un élément flottant est l'élément de type boîte le plus proche dans lequel l'élément flottant est imbriqué. Exemple <body> <h3>la conquête de l'espace</h3> <div width="300px"> <p>de tout temps, l'homme a voulu savoir ce qui se trouvait au-sessus de sa tête. <a href="constellations.html"> <a/> <img src="images/ciel.jpg" style="float:right;" alt="les étoiles attirent le regard"/> La boîte qui contient l'image est l'élément paragraphe. </p> </div> De plus, tout élément flottant se transforme en une boîte, et ceci indépendamment qu'il soit de type au fil du texte (inline) ou bien déja de type boîte. Il se comportera dès lors comme s'il était, disons, une <div>. Plusieurs règles gouvernent le positionnement des éléments flottants.
6 1.Le bord extérieur gauche d'un élément flottant à gauche (déterminé par sa marge de gauche) ne peut pas se trouver à gauche du bord intérieur gauche de la boîte qui le contient (déterminé par le remplissage à gauche). De manière similaire, le bord extérieur droit d'un élément flottant à droite ne peut pas se trouver à droite du bord intérieur droit de la boîte qui le contient. Illustration 2
7 2.Le bord extérieur gauche d'un élément flottant à gauche doit être à droite du bord extérieur droit d'un élément flottant à gauche déclaré plus tôt que lui dans le code HTML du document. De manière similaire, le bord extérieur droit d'un élément flottant à droite doit être à gauche du bord extérieur gauche d'un élément flottant à droite déclaré plus tôt que lui dans le code HTML du document. Ceci permet d'éviter qu'un élément flottant ne soit masqué par un autre. Par exemple, si un élément est flottant à gauche, et qu'un autre élément flottant se trouve déjà entre celui-ci et le bord gauche de la boîte qui les contient, alors le second sera placé à droite du bord de droite du premier élément. Cependant, si le second élément est déclaré au fil du texte à un endroit où plus aucun élément flottant ne vient s'intercaler entre lui et le bord gauche de la boîte qui les contient, alors il sera placé contre le bord intérieur de ce dernier. Illustration 3
8 3.Le bord extérieur droit d'un élément flottant à gauche ne peut pas se trouver à droite du bord extérieur gauche de tout élément flottant à droite présent à sa droite. De manière similaire, le bord extérieur gauche d'un élément flottant à droite ne peut pas se trouver à gauche du bord extérieur droit de tout élément flottant à gauche présent à sa gauche. Ceci permet d'éviter que des parties d'éléments flottants ne se chevauchent. Illustration 4 float:left float:left float:right float:right
9 4.Le bord supérieur d'un élément flottant ne peut pas se trouver plus haut que le bord interne supérieur de la boîte qui le contient. 5.Le bord supérieur d'un élément flottant ne peut pas être situé plus haut que le bord supérieur de tout autre élément flottant (image flottante par exemple) ou de toute autre boîte (div par exemple) déclarés plus tôt dans le flux du document. 6.Le bord supérieur d'un élément flottant ne peut pas se trouver plus haut que le haut du texte (ou contenu équivalent) dans lequel il a été déclaré. Ceci évite entre autres que les images ne remontent plus haut que le rectangle (imaginaire) délimitant la ligne de texte dans laquelle elles ont été déclarées. Illustration 5 <body> <div style="width:400px;border:1px solid #BBBBBB;padding:5px"> L'idée sous-jacente [...] ainsi que des éléments inline. <p style="border:1px solid #BBBBBB;margin:1px;">4. Le bord supérieur d'un élément flottant ne peut pas se trouver plus haut que le bord interne supérieur de la boîte qui le contient.</p> <p style="border:1px solid #BBBBBB;margin:1px;background-color:#FFCCCC;">5. Le bord supérieur d un élément <img src="a.jpg" width="70px" style="float:left;"/> [...]déclarés plus tôt dans le flux du document.</p> <p style="border:1px solid #BBBBBB;margin:1px;">6. Le bord supérieur d'un élément flottant ne peut pas se trouver plus haut que le haut du texte (ou contenu équivalent) [...] la ligne de texte dans laquelle elles ont été déclarées.</p> </div> </body>
10 7.Un élément flottant à gauche qui a un autre élément flottant à sa gauche ne peut pas avoir son bord extérieur droit à droite du bord droit de la boîte qui le contient. De manière équivalente, un élément flottant à droite qui a un autre élément flottant à sa droite ne peut pas avoir son bord extérieur gauche à gauche du bord gauche de la boîte qui le contient. Ceci évite que plusieurs éléments flottants (tous à droite ou tous à gauche) ne se retrouvent tous horizontalement, au-delà des limites de leur conteneur. Illustration 6 <head> <style>.petite_image { float: left; margin: 3px; width: 110px; height: 60px; } </style> </head> <body> <div style="width:400px;border:1px solid #BBBBBB;padding:5px"> Un élément <img class="petite_image" /><img class="petite_image" /> <img class="petite_image" /><img class="petite_image" /> <img class="petite_image" /><img class="petite_image" /> <img class="petite_image" />flottant à gauche qui a un autre élément flottant à sa gauche ne peut pas avoir son bord extérieur droit à droite du bord droit de la boîte qui le contient.<br>ceci évite que plusieurs éléments flottants (tous à droite ou tous à gauche) ne se retrouvent tous horizontalement, au-delà des limites de leur conteneur. </div> </body>
11 8.Un élément flottant doit être placé aussi haut que possible, tout en respectant les règles qui limitent le flottement vers le haut d'éléments au-delà des limites de leur conteneur, ou du texte où ils ont été déclarés. 9.Un élément flottant à gauche doit être placé le plus à gauche possible, et un élément flottant à droite doit être placé le plus à droite possible. Une position plus haute est prioritaire à une position plus à gauche (élément flottant à gauche) ou à droite (élément flottant à droite); les restrictions éventuelles imposées par les règles qui précèdent restent d'application.
12 Mais les règles à elles seules ne disent pas tout. Internet Explorer 6.0 et FireFox interprètent parfois de manière différente les règles CSS. Par exemple, lorsqu'une image flottante est plus large ou plus haute que l'élément qui la contient (p, div,...) alors Internet Explorer agrandit ce dernier (au mépris des dimensions que vous avez imposées), tandis que Firefox fera dépasser l'objet flottant des limites du l'élément conteneur. Illustration 7 <p style="width:400px;border:1px solid red; margin:25px;"> <img src="back2.jpg" width="420px" height="50px" style="float:left;"/> Internet Explorer 6.0 et FireFox [...]
13 Sous Firefox, on peut également remarquer la chose suivante: un p ou une div passe sous une image flottante (observable quand le cadre est dessiné ou quand la couleur de fond est différente de celle de son conteneur), mais son texte ne commence que (image flottante à gauche) ou s'arrête (image flottante à droite) au bord de l'image. Cela ne semble pas être le cas si on remplace le p ou la div par une image. Sous Internet Explorer, le problème ne se pose pas. Illustration 8 <div style="width:450px;border:1px solid red;padding:3px;margin:25px;"> <p><img style="back2.jpg" width="60px" style="margin:15px;float:left;"/> CSS ne sert pas uniquement à formatter le texte et afficher des images de fond. Si on se concentrait un peu sur les tâches de base de mise en page? Bienvenue dans le monde du positionnement.</p> <p style="background-color:#dddddd;font-size:16pt;border:1px dashed navy; padding:5px; width:320px"> Cet encart est un paragraphe non flottant suivant le paragraphe ci-dessus</p> </div>
14 Les marges négatives prêtent également à discussion: Firefox permet de faire dépasser un élément flottant des limites de son conteneur si une marge négative est spécifiée. Internet Explorer ne le permet pas. Remarques également que l image n a pas la même largeur sous Firefox que sous Internet Explorer. Illustration 9 <div style="width:336px;background-color:silver;"> <p style="width:330px;border:1px solid red;margin:25px;"> <img src="back2.jpg" width="80px" height="80px" style="float:left; margin-left:-10px;"/> Les marges négatives prêtent également [...] </p> </div>
15 Souvent associée à la propriété float, la propriété clear permet d'exprimer l'endroit où positionner le contenu déclaré après un élément flottant: plus bas que tout élément flottant à gauche (clear:left), à droite (clear:right) ou les deux (clear:both) déclaré plus tôt. Par défaut, les navigateurs appliquent en principe clear:none. Illustration 10 <div style="width:400px;border:1px solid silver;"> <img src="back2.jpg" width="40px" style="float:left;"/> <img src="back2.jpg" width="60px" height="340px" style="float:right;"/> <p style="clear:none;border:1px solid silver;">css [...]</p> <p style="clear:left;border:1px solid silver;">si on se [...]</p> <p style="clear:none;border:1px solid silver;">bienvenue [...]</p> <p style="clear:right;border:1px solid silver;">ce sont [...]</p> </div>
.. 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
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
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
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
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
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
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...
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
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
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
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
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
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
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
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
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
{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
Activités HTML. Code: act-html
Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:
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
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
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
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
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
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
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer
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
Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.
1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,
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
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
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
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...
Notice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
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
Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10
Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI
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
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
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
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...
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
Création WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
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
CONCEPTION D E-MAILS ADAPTATIFS
CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,
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
Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD
Access 2010 Entraînement 1 Garage Renault Dossier 24 MCD Objectifs Concevoir une modèle conceptuel de données pour Access Durée 45 Support Papier Travail à faire : 1. Concevoir le dictionnaire des données.
Stellar Phoenix Outlook PST Repair - Technical 5.0 Guide d'installation
Stellar Phoenix Outlook PST Repair - Technical 5.0 Guide d'installation 1 Présentation Stellar Phoenix Outlook PST Repair - Technical offre une solution complète pour la récupération de données à partir
AGASC / 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
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
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
PHP et les Bases de données - Généralités
PHP et les Bases de données - Généralités Conception d une base de données Méthodes utilisées : MERISE, UML Modèle conceptuel des données MCD, Modèle logique MLD, Modèle Physique MPD. Ces aspects seront
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.
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
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
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
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
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
Création d un site Internet
Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
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
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,
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale
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
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
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
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).
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
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,
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
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
Pré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
Création d'un site neutre et présentation des éléments de la page d'accueil
Création d'un site neutre et présentation des éléments de la page d'accueil Alkante Page 1/8 Table des matières Préambule... 3 Création d'un site neutre... 3 Rubriques de pages éditoriales...5 Contenu
Création d'un site dynamique en PHP avec Dreamweaver et MySQL
Création d'un site dynamique en PHP avec Dreamweaver et MySQL 1. Création et configuration du site 1.1. Configuration de Dreamweaver Avant de commencer, il est nécessaire de connaître l'emplacement du
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é
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
Guichet ONEGATE COLLECTE XBRL SOLVABILITE II (S2P) Manuel d utilisateur VERSION 1.4 16/04/2014 ORGANISATION ET INFORMATIQUE SDESS.
Guichet ONEGATE Manuel d utilisateur COLLECTE XBRL SOLVABILITE II (S2P) ORGANISATION ET INFORMATIQUE SDESS VERSION 1.4 16/04/2014 Version 1 SUIVI DES VERSIONS Version Date Nature des modifications Paragraphe
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
Table des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13
Voici un petit tutoriel d'utilisation du tableau numérique de la marque promethean. Ce tutoriel est loin d'être complet, il permet juste une première approche simple des outils de base du logiciel ACTIVstudio.
Java 7 Les fondamentaux du langage Java
184 Java 7 Les fondamentaux du langage Java 1.1 Les bibliothèques graphiques Le langage Java propose deux bibliothèques dédiées à la conception d'interfaces graphiques. La bibliothèque AWT et la bibliothèque
// HTML, Javascript XHTML & CSS
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction
Celui qui vous parle. Yann Vigara
Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans
Introduction à Eclipse
Introduction à Eclipse Eclipse IDE est un environnement de développement intégré libre (le terme Eclipse désigne également le projet correspondant, lancé par IBM) extensible, universel et polyvalent, permettant
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Services bancaires par Internet aux entreprises. Guide pratique pour : Transfert de fichiers Version 08.05.22
Services bancaires par Internet aux entreprises Guide pratique pour : Transfert de fichiers Version 08.05.22 Table des matières Introduction...3 Avez-vous besoin d'aide?... 3 Exigences informatiques...
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
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
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
L'accessibilité des applications web mobiles
L'accessibilité des applications web mobiles ou la véritable histoire d un projet web mobile (très) grand public vu par ses utilisateurs Contée par Sébastien Delorme, Atalan Casting Critiques «Une histoire
Cré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
Créer une carte personnalisée
Créer une carte personnalisée Avec Google Maps, vous pouvez créer vos propres cartes personnalisées pour indiquer par exemple les endroits que vous avez déjà visités, l'emplacement des restaurants où vous
Formation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
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
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
Le pare-feu de Windows 7
Le pare-feu de Windows 7 Le pare-feu (firewall) intégré à Windows 7 vous permet d'empêcher les utilisateurs ou logiciels non autorisés (comme les vers) d'accéder à votre ordinateur depuis un réseau ou
GUIDE 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
Gestion des documents avec ALFRESCO
Gestion des documents avec ALFRESCO 1 INTRODUCTION : 2 1.1 A quoi sert ALFRESCO? 2 1.2 Comment s en servir? 2 2 Créer d un site collaboratif 3 2.1 Créer le site 3 2.2 Inviter des membres 4 3 Accéder à
TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives