Création d un site Internet (partie 2 )
|
|
|
- Yves Sergerie
- il y a 8 ans
- Total affichages :
Transcription
1 Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : Adresse mail : jleu10@free.fr Jean-Louis DAUCHEZ
2 1/ Le contenu et le XHTML 2/ La présentation et le CSS 2.1 Où utiliser le langage CSS? 2.2 Appliquer un style à des balises 2.3 Les commentaires dans le CSS 2.4 Les class et id 2.5 Imbrications de balises 2.6 Formatage du texte 2.7 Les couleurs 2.8 Les méga propriétés 2.9 Le fond 2.10 Les pseudots-formats 2.11 Les blocs 3/ Son site sur le web
3 2/ La présentation et le CSS Rappel : Pour faire un site Internet, on utilise deux langages, le XHTML pour le contenu et le CSS pour la présentation du site. 2.1 Où utiliser le langage CSS? 3 méthodes : 1. Dans l en-tête du fichier XHTML 2. Dans les balises XHTML 3. Dans un fichier CSS (conseillé)
4 1. Dans l en-tête du fichier XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="fr" > <head> <title>exemple de CSS dans le header</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> <body> </body> </html> </head> </style> 2. Dans les balises XHTML <h1 id="haut" style="color:blue;font-size:18px;font-family:verdana;">prénom NOM</h1> Ajout de l attribut style="propriétés CSS" dans la balise Les propriétés CSS s écrivent ainsi : color : blue ; nomdelapropriété : valeur ;
5 3. Dans un fichier CSS Ouvrir le bloc note et enregistrer dans votre dossier contenant votre fichier XHTML et votre dossier images, le fichier presentation.css Dans le fichier XHTML, on ajoute une ligne dans la balise <head> pour spécifier le fichier CSS utilisé <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="fr" > <head> <title>cv de Prénom NOM</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" media="screen" type="text/css" title="css du CV" href="presentation.css" /> </head> Balise <link /> pour faire un lien (ici vers le fichier CSS presentation.css) Attribut rel : type de lien (stylesheet fichier CSS) Attribut media : type de média (screen écran d ordinateur) Attribut type : type de contenu (text/css langage CSS) Attribut title et href
6 2.2 Appliquer un style à des balises h1 { color:rgb(55,103,174); font-size:18px; margin-top:15px; nom de la balise { propriété1:valeur; propriété2:valeur; Si on veut appliquer un même style à plusieurs balises: h1,h2,h3,h4 { font-weight :bold; 2.3 Les commentaires dans le CSS /* Les titres seront en gras */ h1,h2,h3,h4 { font-weight :bold; On écrit le commentaire entre /* et */
7 2.4 Les class et les id Rappels : class : attribut permettant d attribuer des propriétés css à une balise que l on peut retrouver plusieurs fois dans le XHTML. id : attribut permettant d attribuer des propriétés css à une balise UNIQUE dans le XHTML. <div id="global"> <div id="colonne2"> <h2 class="droite">formations</h2> <h2 class="droite">experiences PROFESSIONNELLES</h2> </div> </div> Dans le fichier css : - on ajoute un # avant le nom de l id - on ajoute un. avant le nom de la classe #global { width:900px; margin:auto;.droite { background-color:white; color:rgb(55,103,174); font-size:16px; text-align:center;
8 2.5 Imbrication des balises a { text-decoration:underline; color:white; border:none; #bas a { color:rgb(55,103,174); text-decoration:none; Les liens seront soulignés, écris en blanc et sans bordure Tous les liens contenus dans le bloc bas (id="bas") seront écris en bleu et ne seront pas soulignés.
9 2.6 Formatage du texte (Suivre à partir du polycopié sur les balises CSS) La police : font-family La taille : font-size (px, em, %) Gras : font-weight (bold, bolder, lighter, normal) Décoration : text-decoration (underline, blink, overline, ) Alignement : text-align (left, center, right, justify) 2.7 Les couleurs color (pour le texte) background-color (pour l arrière-plan) Nom de la couleur en anglais (black, red ) Couleur héxadécimale #0099cc Couleur RGB rgb(255,255,255) (Voir Paint, Couleur, Modifer les couleurs, Définir les couleurs personnalisées)
10 2.8 Les méga propriétés Font : bold, 16px, Arial; 2.9 Le fond Couleur de fond background-color:#0099cc; Image de fond background-image : url("../images/neige.png"); background-attachment: fixed ou scroll background-repeat background-position (méga propriété -> background:url("images/fond.png") no-repeat fixed top right; ) 2.10 Les pseudos-formats lorsque le visiteur pointe dessus avec la souris, a:hover lorsque le visiteur clique dessus, a:active lorsque le visiteur a sélectionné le lien, a:focus lorsque le visiteur a déjà vu la page, a:visited Ne fonctionne pas qu avec les liens! (images, menus, paragraphes, titres ) (Voir aussi :first-letter, :first-line, :before, :after)
11 2.11 Les blocs (ou boites) La taille : Largeur = width : npx; Hauteur = height : npx; Les bordures : border-top, border-bottom, border-right, border-left (si mêmes valeurs pour les 4, border) border : 1px solid black; (épaisseur, style, couleur) Les marges extérieures et intérieures : Marges extérieures = margin Marges intérieures = padding #bloc { margin-top : 20px; margin-bottom : 10px; margin-right : 5px; margin-left : 1px; (Idem padding)
12 Méga propriété margin (ou padding): Si 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite Si 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite Si 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas Si 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche. Centrer automatiquement les blocs : margin : auto; (ne peut fonctionner que si vous avez indiqué une largeur au bloc!)
13 La position des blocs : Le positionnement absolu : il permet de placer un bloc n'importe où sur la page (position de départ = en haut à gauche de la page). Le positionnement fixe : idem que le positionnement absolu, mais cette fois le bloc reste toujours visible, même en descendant dans la page. Le positionnement relatif : il permet de déplacer un bloc par rapport à sa position normale. Propriété css : position Valeurs possibles : absolute : positionnement absolu, fixed : positionnement fixe, relative : positionnement relatif. Position de départ #bloc { position: absolute; left: 35px; top: 50px;
14
15 Ajouter ce code dans le css, enregistrer et regarder le résultat dans le navigateur body { background-color:#0099cc; font-family:verdana,arial; font-weight:none; #global { width:900px; margin:auto; #page { width:896px; background:white; border:2px solid #3767ae; margin-top:20px; #civilite { text-align:center; margin-top:40px; font-weight:bold; #colonne1 { width:415px; padding:15px; float:left; #colonne2 { width:415px; padding:15px; margin-left:450px; #bas { text-align:center; margin-top:20px; margin-bottom:10px; width:900px; clear:left; color:rgb(55,103,174); #footer { padding-top:10px; padding-bottom:10px; width:900px; margin:auto; background-color:#0099cc; color:white; text-align:center;
16 1/ Le contenu et le XHTML 2/ La présentation et le CSS 3/ Son site sur le web 3.1 Le nom de domaine 3.2 L hébergeur 3.3 Client FTP 3.4 Référencement
17 3/ Son site sur le web 3.1 Le nom de domaine Exemple : google.fr Extensions :.com,.fr,.be,.eu,.net,.org, etc Tarif environ 10 par an. Comment obtenir un nom de domaine : 1. Passer par un registrar spécialisé. C'est un organisme qui sert d'intermédiaire entre l'icann (l'organisation qui gère les noms de domaine au niveau international) et vous (ex : 1&1, OVH et Gandi sont de célèbres registrars français). 2. Commander le nom de domaine en même temps que l'hébergement.
18 3.2 L hébergeur Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés "Serveurs" (ordinateurs très puissants qui restent tout le temps allumés). Les serveurs sont empilés dans des baies (armoires climatisées). L'hébergeur est une entreprise qui se charge de gérer les serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24 7j/7. Ces baies se situent dans des lieux particuliers appelés datacenters. Les datacenters sont donc des "entrepôts à serveurs" en quelque sorte, et leur accès est très protégé. Hébergement mutualisé : si vous optez pour une offre d'hébergement mutualisée, votre site sera placé sur un serveur gérant plusieurs sites à la fois. C'est l'offre la moins chère. Hébergement dédié : le serveur gère uniquement votre site et aucun autre. Attention, cela coûte assez cher et il faut avoir des connaissances en Linux pour administrer le serveur à distance. Il existe des hébergeurs gratuits qui proposent d héberger votre site gratuitement, mais souvent il y a des conditions de taille, de trafic et des publicités qui s affichent. Pour héberger son site sur voila.fr ( ) : Sur le site ressource ( Héberger son site perso avec voila.fr
19 3.3 Client FTP FTP signifie File Transfer Protocol, c'est le moyen que l'on utilise pour envoyer les fichiers sur le serveur. Il existe des logiciels permettant d'utiliser le FTP pour transférer vos fichiers sur Internet comme FileZilla ou FireFTP (voir site ressource Firefox et FireFTP). 3.4 Référencement Pour être accessible sur le net, on utilise l adresse url du site ( Mais pour que des visiteurs viennent sur votre site sans connaître cette adresse il faut que le site soit référencé. - Les annuaires : il faut inscrire son site à cet annuaire et que le webmaster du site accepte votre site. Des visiteurs peuvent accéder à votre site via ces annuaires. - Les moteurs de recherche (Google, Yahoo, Msn, Bing ) : (Pour ajouter son site à l index de Google -> ) Référencement naturel : Si votre site est accepté il apparaîtra dans les pages de recherche en fonction des mots clés tapés. La position du site dépendra du contenu XHTML (Titres, balises : title, keywords, etc ), des Backlinks (liens vers votre site), du PageRank du site, du nombre de visite, de la durée des visites, du nombre de pages visitées Référencement payant : Vous pouvez payer le moteur de recherche pour que votre site apparaissent dans ses liens commerciaux en enchérissant sur certains mots-clés
20 Terminer votre site CV en vous inspirant du modèle du site ressource (fichiers XHTML et CSS). Demander si besoin d aide! A la fin du TD : - Si tout est terminé, demander à faire enregistrer votre travail sur clé usb - Si ce n est pas terminé, conserver vos fichiers pour terminer votre travail et envoyer les fichiers XHTML, CSS et images de votre site à jleu10@free.fr au plus tard le 27 novembre 2009!
21 SITE RESSOURCE : Fichiers à copier ou télécharger pour les TD Code XHTML minimum Photo du CV Image W3C Documents TD1 sur le XHTML "Cours" TD XHTML Les balises XHTML TD XHTML (version pdf) Correction des blocs pour le CV Documents TD2 sur le CSS et son site sur le web "Cours" TD CSS et son site sur le web Les balises CSS Logiciels Le navigateur Firefox L'éditeur de texte Notepad Pour aller plus loin Ulitiser Notepad++ Héberger un site perso avec voila.fr Firefox et Web developer Firefox et FireFTP Un éditeur de contenu (CMS) Joomla
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
.. 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
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
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
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?
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
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
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
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
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
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
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
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
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
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
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
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
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
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
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
Logiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
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
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
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
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
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.
Débuter avec WordPress 1/5
Débuter avec WordPress 1/5 Penser son future site internet Avant de commencer la construction d un site, pour gagner du temps, essayé de penser comment se présentera ce site, voir même de l esquisser sur
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
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
FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur)
Publication par FTP FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur) Logiciels FTP nombreux (FileZilla, CuteFTP, WinSCP, FTP Expert).
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
Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?
9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins
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,
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...
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
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
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
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
Louer et utiliser un Hébergement Mutualisé OVH (Version 1.0)
Louer et utiliser un Hébergement Mutualisé OVH (Version 1.0) Page 1/27 Table des matières 1.L'hébergement mutualisé c'est quoi?...3 2.Quel hébergeur choisir?...4 3.Louer un hébergement mutualisé chez OVH...4
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
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
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...
Association UNIFORES 23, Rue du Cercler 87000 LIMOGES
RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description
{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
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
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Bureautique Initiation Excel-Powerpoint
Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office
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
creer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
SOMMAIRE. 1. Comprendre les bases - référencement, indexation et positionnement - comment fonctionne Google pour indexer et référencer un site?
SOMMAIRE 1. Comprendre les bases - référencement, indexation et positionnement - comment fonctionne Google pour indexer et référencer un site? 2. Comment définir une stratégie de référencement? - connaître
CRÉER SON SITE INTERNET. Créer son site Internet. Méd de Roanne. FG 16/09/08
CRÉER SON SITE INTERNET 1 Tout d abord, nous allons réviser quelques notions de base permettant de comprendre ce qu est un site Internet, et ce que cela implique. Dans un second temps, le lien ci-après
MODULES 3D TAG CLOUD. Par GENIUS AOM
MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.
Pour en expliquer le principe, on se limitera à deux exemples :
Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera
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
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
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
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
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO éditions Page 2/14 A propos de l auteur... Souvent défini comme «sérial-créateur», Jean-Marie PÉRON est à l origine depuis 1992 d entreprises
Introduction. M2206 Intégration web. Introduction. Introduction 20/01/2014
Introduction M2206 Intégration web http://www.atinternet.fr/ressources/ressources/etudespubliques/barometre-des-moteurs/ Référencement des sites web et moteurs de recherche Introduction Introduction http://www.go-gulf.com/blog/social-networking-user/
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
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
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
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,
TP création et publication d'un site web statique
TP création et publication d'un site web statique Ce TP va se décomposer en trois parties. Dans un premier temps nous créerons un site web statique. Le site sera créé avec l'éditeur Amaya pour respecter
Guide et conseils généraux pour optimiser le référencement d un site internet
Guide et conseils généraux pour optimiser le référencement d un site internet Novembre 2010 1 Introduction Le référencement de votre site internet vous permet d être présent dans les différents moteurs
PEPSITE EST COMPATIBLE UNIQUEMENT SUR IE10+
1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE. Nous utiliserons donc volontairement un vocabulaire et une méthode de travail accessibles à un public
Architecture Multi-Niveaux
Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une
Guide d utilisation 2012
Guide d utilisation 2012 Tout ce dont vous avez besoin pour bien démarrer REACOM La performance marketing SOMMAIRE Démarrez avec reagiciel Accédez à votre console d administration 4 Gestion internet Aperçu
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...
Client / 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
Projet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
Un site web collaboratif avec Drupal. Judith Hannoun - Journées INSHS 16 Octobre 2012
Un site web collaboratif avec Drupal Judith Hannoun - Journées INSHS 16 Octobre 2012 Site web Ensemble de pages en html Des liens hypertextes Une base de données si site dynamique Une interface graphique
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
Webmaster / Webdesigner / Wordpress
Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un
Créer un site WordPress
Utilisation pédagogique d une solution de gestion de contenu Créer un site WordPress Portfolio, Blog, plateforme,... Les blogs et les plateformes d enseignants sont un moyen de poursuivre la relation élèveenseignant
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop
Créer son site internet avec Jimdo. Web business
Créer son site internet avec Jimdo Web business Créer vous-même votre site internet avec Jimdo. En quelques clics, vous pourrez créer gratuitement un site dédié à votre activité et donnez de la visibilité
Introduction... 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
COMMENCER AVEC VUE. Chapitre 1
Chapitre 1 COMMENCER AVEC VUE Traduction en français du premier chapitre du manuel d'utilisation du logiciel VUE. Traduit de l'américain par Bernard Aubanel. CRÉER UNE NOUVELLE CARTE Pour ouvrir VUE: 1.
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
4. Personnalisation du site web de la conférence
RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»
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 à
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é
16 septembre 2013. Lundi de l Economie l. rencement. Foix. CCI Ariège
Lundi de l Economie l Numérique 16 septembre 2013 Lundi de l Economie l Numérique Le référencementr rencement Foix CCI Ariège Définition Référencement naturel Le référencement (SEO, Search Engine Optimization)
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Optimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche
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
Extended communication server 4.1 : VoIP SIP service- Administration
Extended communication server 4.1 : VoIP SIP service- Administration Mai, 2008 Alcatel-Lucent Office Offer - All Rights Reserved Alcatel-Lucent 2007 Ce document explique comment configurer le Service VOIP-SIP
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
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
multi process 25 RUE Benoît Malon 42300 ROANNE
multi process 25 RUE Benoît Malon 42300 ROANNE Tél : 04 77 70 14 66 Fax : 04 77 70 01 78 www.mpi42.fr contact@mpi42.fr CREATION DE SITE WEB Il faut distinguer plusieurs étapes pour la création d un site
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception