TP07: barre de navigation
|
|
|
- Roland Milot
- il y a 6 ans
- Total affichages :
Transcription
1 TP07: barre de navigation Ce tp poursuit les tps précédents. Pour commencer, dans votre dossier «php» (qui est dans «www»), recopiez vos fichiers du TP06 dans un nouveau dossier «TP07» (cp -r TP06 TP07). Vous travaillerez à partir de maintenant dans ce nouveau dossier TP Création d une barre de navigation L objectif est de créer une barre de navigation, c est-à-dire un menu, que vous allez inclure dans toutes les pages de votre site. A cette occasion renommer listearticle.php en index.php. Voici le contenu du menu: Accueil : c est un lien vers la page d accueil (index.php, anciennement listearticle.php), la page qui liste toutes les catégories et toutes les nouvelles. Catégories : c est un titre de menu, pas un lien. Ce menu contiendra des liens pour voir les nouvelles par catégorie : o France : lien vers la page tp02.php avec le paramètre dossier=france o monde : lien vers la page tp02.php avec le paramètre dossier= monde o politique : lien vers la page tp02.php avec le paramètre dossier= politique o sports : lien vers la page tp02.php avec le paramètre dossier= sports Administrer : c est un lien vers une nouvelle page, gerer.php, qui fonctionne comme ajouter.php et supprimer.php. Il faut être connecté pour voir le contenu, sinon, le menu de connexion est affiché. Le contenu de la page est pour l instant un lien vers ajouter.php et supprimer.php. Un fichier générant son contenu est fourni : gerer.inc. Ce menu contient pour l instant deux liens : o Ajouter une nouvelle : lien vers ajouter.php o Supprimer une nouvelle : lien vers supprimer.php Créez un nouveau fichier «inclusion/navigation.inc». Celui-ci aura pour squelette : <?php session_name("votre_login"); session_start(); include "inclusion/nom.inc"; function genererbarrenavigation( ) // valeur de retour : une chaine de caractère $barrehtml = ""; // fonction à écrire... return $barrehtml ;
2 function genererlien($url, $nom) // valeur de retour $resultat = ""; if ($url) // cas d'un menu simple : un lien $resultat.= "<a href='$url'>$nom</a>\n"; else // cas où il n'y a même pas de lien... $resultat.= "<span>$nom</span>\n";?> return $resultat; Toutes les pages php commenceront par require_once "inclusion/navigation.inc"; à la place de commencer par session_start( ) (car c est dans navigation.inc) et include "inclusion/nom.inc" (car c est également dans navigation.inc). Toutes les pages php (sauf detruire.php) appelleront genererbarrenavigation et en afficheront le résultat juste après la balise ouvrante <body>. Vous devez compléter la fonction genererbarrenavigation pour qu elle génère un menu dont le code html est : <div class='barrenavigation'> <div class='menu'><a href='index.php'>accueil</a> <div class='menu'><span>catégories</span> <div class='sousmenu'> <a href='tp02.php?dossier=france'>france</a> <a href='tp02.php?dossier=monde'>monde</a> <a href='tp02.php?dossier=politique'>politique</a> <a href='tp02.php?dossier=sports'>sports</a> <div class='menu'><a href='gerer.php'>administrer les nouvelles</a> <div class='sousmenu'> <a href='ajouter.php'>ajouter une nouvelle </a> <a href='supprimer.php'>supprimer une nouvelle</a> Pour compléter la fonction genererbarrenavigation, voici une démarche possible :
3 1. Créez deux tableaux $nomsliens et $adressesliens, ils contiendront le contenu des menus, respectivement les noms affichés et les adresses des liens (ou "" si ce n est pas un lien) : a. Si le menu d incide $i n est qu un lien, $nomsliens[$i] sera le texte du menu et $adressesliens[$i] sera l url (la page cible) du lien (comme index.php) b. Si le menu d incide $i comportent plusieurs éléments, alors $nomsliens[$i] et $adressesliens[$i] sont des tableaux : i. $adressesliens[$i][0] sera l adresse du lien de l intitulé du menu (comme gerer.php) ou alors il vaudra "" si ce n est pas un lien (comme Catégorie) ii. $nomsliens[$i][0] sera le texte du nom de la rubrique (que cela soit un lien ou non) iii. Ensuite les éléments seront les liens qui composent le menu. 2. Parcourrez ces tableaux (ils partagent «en quelques sortes» les mêmes indices) pour générer un html comme celui montré ci-dessus. Pour cela, utilisez une boucle : foreach($adressesliens as $indice => $adresse) Respectez bien les classes CSS, elles serviront pour la 3ième partie de ce TP. Ainsi, il vous suffira de modifier le contenu de cette fonction (les tableaux $nomsliens et $adressesliens) pour modifier la barre de navigation sur chaque page. 2. Génération des entêtes Créez un dossier «styles» et déplacez «TP02-style.css» dedans. Créez également un fichier «styles/menu.css». Pour l instant ce fichier sera vide, vous le compléterez dans la question suivante. Dans le fichier «inclusion/navigation.inc», ajoutez une fonction : function genererentetes($titre="page sans titre...") $entetes = "" ; // à compléter return $entetes ; Cette fonction genererentetes retourne des entêtes html, qui seront semblables à (si la valeur Lire les nouvelles est passé en paramètre) le doctype n est pas imposé, du moment où vous en choisissez un et que vous le respecter : <!doctype html> <html> <head> <meta charset="utf-8" /> <title>lire les nouvelles</title>
4 <link media="screen" type="text/css" rel="stylesheet" href="styles/tp02-style.css" /> <link media="screen" type="text/css" rel="stylesheet" href="styles/menu.css" /> </head> <body> Pour cela, vous pouvez utiliser le HEREDOC de php : // EOD est un délimiteur que choisissez $string = <<<EOD Exemple de chaine de caractère sur plusieurs lignes. Son contenu est interprété par php, si bien qu on peut utiliser des variables (comme $texte), elles seront remplacées par leur valeur EOD; // le délimiteur de fin doit être impérativement à la première colonne // n oubliez pas le point-virgule 3. Création du css Il s agit de compléter le fichier «styles/menu.css». Il contiendra tous les styles pour réaliser le menu déroulant. Il est à faire en concordance avec le code html généré (et les classes css précisées dans ce code). Pour faire un menu avec css, il faut un élément de taille fixe qui contient un élément invisible qui deviendra visible lorsque la souris sera au-dessus de l'élément de taille fixe. Pour éviter de faire bouger la page (si un élément apparait, il peut "pousser" ce qui est après lui), il faudra donc que l'élément de taille fixe ne change pas de taille. C est pourquoi vous avez la div de classe «menu» (élément de taille fixe) et la div de classe «sousmenu» (élément invisible qui apparait). La div de classe «barrenavigation» permet de placer le tout dans la page. Pour une version HTML5, à vous de choisir entre les deux, voici des équivalences : la div de classe «menu» devient une balise nav la div de classe «sousmenu» devient une ul La div de classe «barrenavigation» devient une balise header Dans la suite, c'est la version avec les div qui est présenté, à vous de faire les équivalences.
5 3.1. Position de la barre de navigation 3.2. Style d un menu Faisons d'abord une mise en forme de décoration : bords arrondis et marges internes de 5px (borderradius, padding), alignement centré du texte (text-align), un cadre fin bleu (border) et une ombre noir vers la droite et vers le bas (box-shadow). Pour le menu : fixer les dimensions à 1.3em de haut et 13em de large (height, width). lorsque la souris survol cette sorte de div (:hover), changez-en la couleur de fond à une couleur rgb(200,200,255), i.e., un bleu clair Element qui doit se dérouler une div de classe "sousmenu" qui est dans une div de classe "menu". Faisons d'abord une mise en forme de décoration qui ne seront visibles que lorsque le menu sera déroulé : bords arrondis de 5 px uniquement en bas et marges internes de 0.2em, une couleur de fond de rgb(200,200,255), un bord fin bleu, sauf pour le haut et une ombre noir vers la droite et vers le bas. Maintenant, cachons le : donnez-lui une hauteur de 0, cachez ce qui dépasse (overflow) et rendez-le complétement transparent (opacity). Pour voir les effets d'animations, ajoutez (pour différents navigateurs) : transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; 3.4. Faire dérouler le menu Le menu doit être visible lorsque la souris passe dessus. C'est donc lorsqu'elle passe sur la div "menu" que la div "sousmenu" qu'elle contient doit être visible. Traduisez cette phrase en sélecteur css, ce sélecteur donnera l'interactivité du menu. Pour le rendre visible, il faut "annuler" la transparence et lui donner une hauteur non nulle (essayer avec 4.5em ce qui ira bien quand il y a 3 liens).
6 3.5. Rendre le menu déroulé "utilisable". En l'état, il doit être difficile de cliquer sur les liens des menus : les liens sont en dessous du texte de la page ou alors le menu disparait quand on essaie d'aller sur un lien avec la souris. Pour y remédier, utilisez sur la div "sousmenu" la propriété position à une valeur relative et un z-index (profondeur) de 1 (au-dessus de ce qui suit) Les liens du menu. Mettez les liens qui sont dans une div "sousmenu" de la façon suivante : affichez-les (display) comme un élément de niveau "block" et centrez le texte. Comparez les deux menus et qu'en déduisez-vous sur les div qui encadrent les liens dans le premier menu déroulant? Pour mettre en valeur ces liens lorsqu'ils sont survolés par la souris, donnez-leur dans un tel cas un cadre fin bleu et un fond de couleur blanche semi-transparente. Pour éviter un effet de "déplacement" lié à l'apparition du cadre, ajouter un cadre fin transparent quand la souris ne survole pas le lien Plusieurs menus déroulants côte à côte. En utilisant «float: left;», placez les menus l'un à côté de l'autre. Placez une marge pour les espacer un peu. Ajoutez des dossiers dans le dossier «news» (donc des catégories de nouvelles en plus). Les voyezvous? Changez la hauteur de la div «sousmenu» lorsqu'elle est visible à la valeur auto. Voyez-vous le lien? L'animation du menu qui se déroule est-elle toujours la même?
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
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
{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
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...
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
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
RÉALISATION D UN SITE DE RENCONTRE
RÉALISATION D UN SITE DE RENCONTRE Par Mathieu COUPE, Charlène DOUDOU et Stéphanie RANDRIANARIMANA Sous la coordination des professeurs d ISN du lycée Aristide Briand : Jérôme CANTALOUBE, Laurent BERNARD
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
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
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
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
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
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 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
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
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
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
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
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
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
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é
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
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
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
Serveur d'application Client HTML/JS. Apache Thrift Bootcamp
Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/
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
Démonstration de la mise en cache via HTML 5 sur iphone
Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent
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
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...
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
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,
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
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
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
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)
25 mars. Tutoriel sur Laravel. Préparé par : Lydiane Beaulne-Bélisle. Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel.
25 mars Tutoriel sur Laravel Préparé par : Lydiane Beaulne-Bélisle Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel. Créé pour le cours de Projet de fin d étude Collège de
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
TP Service HTTP Serveur Apache Linux Debian
Compte rendu de Raphaël Boublil TP Service HTTP Serveur Apache Linux Debian Tout au long du tp, nous redémarrons le service apache constamment pour que les fi de configuration se remettent à jour - /etc/init.d/apache2
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...
Modules Prestashop - ExportCatalogue / EXPORT IMPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0. 1 - Optim'Informatique
IMPORT / EXPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0 1 - Optim'Informatique Installation INSTALLATION Pour installer le module ExportProduits copier le répertoire exportcatalogue dans
WIMS. Découvrir et utiliser
WIMS Découvrir et utiliser (version préliminaire - 3 janvier 2011) Copyright c 2009 WIMS EDU GNU FDL Copyleft 2009 http://wimsedu.info 1 Découverte 1. Découvrir WIMS (I) Un internaute désire découvrir
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.
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 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
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
HTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
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
SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. 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 : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions
Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1
Créer une base de données vidéo sans programmation (avec Drupal)
Créer une base de données vidéo sans programmation (avec Drupal) 10.10.2013 Nicolas Bugnon (nicolas.bugnon@alliancesud.ch) Centre de documentation Alliance Sud www.alliancesud.ch Résultat de l atelier
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
Projet ISN - dossier réalisé par Randrianarimanana Stéphanie. Titre du projet : Site de rencontre. le nom de notre site de rencontre : Linkymeet
Projet ISN - dossier réalisé par Randrianarimanana Stéphanie Titre du projet : Site de rencontre le nom de notre site de rencontre : Linkymeet ( tout astérisque* signifie voir annexe) l'équipe : Randrianariamanana
Référencement Naturel ou SEO Search Engine Optimization
Agence Référencement R & WebMarketing www.1ere-position.fr Référencement Naturel ou SEO Search Engine Optimization 24 avril 2009 - SNPAR 1ère Position S.A. (siège social) Savoie Technolac - Alouette II
Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
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
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
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
Zen, SASS, responsive design
, SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie
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
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
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
Impact des robots d indexation sur le cache de second niveau de SPIP IMBERTI Christophe - SG/SPSSI/CP2I/DO Ouest 06/06/2012 mis à jour le 05/07/2012
Impact des robots d indexation sur le cache de second niveau de SPIP IMBERTI Christophe - SG/SPSSI/CP2I/DO Ouest 06/06/2012 mis à jour le 05/07/2012 SOMMAIRE 1. LE CONSTAT... 2 2. L EXPLICATION... 2 3.
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
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
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
TUTORIEL CartoDB www.cellie.fr 11/03/15
TUTORIEL CartoDB www.cellie.fr 11/03/15 1 INTRODUCTION Issue de la technologie du cloud, CartoBD est une application créée par la société Vizzuality. Elle permet de réaliser des cartographies à partir
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
Site web établissement sous Drupal
Site web établissement sous Drupal Etat Date Rédacteur Version Création 12/12/2013 C. Vilport Pôle Web DASI 1.0 Modification 04/02/2014 C. Vilport Pôle Web DASI 1.1 Diffusion aux 06/02/2014 C. Vilport
PLUGINS Guide du Développeur STEPHANE FERRARI. P l u X m l 5.4
PLUGINS Guide du Développeur STEPHANE FERRARI P l u X m l 5.4 Table des matières Présentation de PluXml...5 Principales caractéristiques...5 Pré-requis...6 Procédure d'installation...6 Procédure de mise
Compléments de documentation Scilab : affichage de texte et formatage de nombres
Université des Sciences et Technologies de Lille U.F.R. de Mathématiques Pures et Appliquées Agrégation externe Année 2002-2003 Compléments de documentation Scilab : affichage de texte et formatage de
1. Création d'un état... 2. 2. Création d'un état Instantané Colonnes... 3. 3. Création d'un état Instantané Tableau... 4
1. Création d'un état... 2 2. Création d'un état Instantané Colonnes... 3 3. Création d'un état Instantané Tableau... 4 4. Création d'un état avec plusieurs tables... 9 5. Modifier la structure d'un état...11
Stocker des données sur Amazon S3
4 Stocker des données sur Amazon S3 Dans ce chapitre, nous plongeons la tête la première dans Amazon S3, Simple Storage Service (service simple de stockage). Après un aperçu rapide des concepts de S3 les
Dans l'article précédent, vous avez appris
Pour les débutants Les différents formats de sortie proposés par PHPExcel La bibliothèque orientée objet PHPExcel permet de lire et créer des fichiers pour tableurs. Dans cette série d articles, vous apprendrez
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
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
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
À propos de Kobo Desktop... 4. Télécharger et installer Kobo Desktop... 6
Kobo Desktop Manuel d utilisation Table des matières À propos de Kobo Desktop... 4 Télécharger et installer Kobo Desktop... 6 Installer Kobo Desktop pour Windows... 6 Installer Kobo Desktop pour Mac...
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
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
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
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
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
PLAN. Qui peut faire quoi? Présentation. L'internaute Consulte le site public
SPIP est une interface en ligne gratuite permettant de créer des sites collaboratifs de façon suffisament simple pour que les élèves puissent publier leur propres articles. Il permet aussi d'héberger son
Informatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
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
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
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
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
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.
Ecran principal à l ouverture du logiciel
MANUEL D UTILISATION PLATEFORME SMS Félicitations pour avoir choisi notre plateforme d envoi de SMS. Le logiciel est très simple d utilisation et intuitif. Avec ce logiciel vous êtes libre de créer vos
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework L'objectif de ce document est de poser des bases de réflexion sur la modélisation d'un projet réalisé