Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs

Dimension: px
Commencer à balayer dès la page:

Download "Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs"

Transcription

1 Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs

2 1/ Grille et breakpoints Desktop : <1200px Mobile : <640px Tablette : 1200px>...<640px

3 2/ Specs Globales Global > couleur de textes : #ffffff ou # ou #ff6600 Global desktop : > Texte footer : 18pts / Helvetica neue Std / Roman > Texte bulle orange : 28pts / Helvetica neue Std / Bold > Texte boutons : 18pts / Helvetica neue Std / Bold Global tablette : > Texte bulle orange : 44pts / Helvetica neue Std / Bold > Texte boutons orange : 54pts / Helvetica neue Std / Bold > texte boutons liseret blanc : 27pts / helvetica neue Std / bold Global mobile : > Texte boutons orange : 41pts / Helvetica neue Std / Bold > texte boutons liseret blanc : 26pts / helvetica neue Std / bold

4 3/ Specs HP Desktop : 1920px Jusqu'à 1200px : > Background rezise selon résolution. Reste centré sur x et y. > Taille de boite noire de bouge pas, texte non plus. Le tout reste centré. (comportement systématique sur toutes les pages du site.) > La bulle reste de la même taille et coulisse sur axe des x pour rester à 100px du bord de droite. Elle ne doit jamais être coupée par le bord haut de la page. Taille de texte de bulle inchangé. > footer : «footer_desktop.psd». Les icônes FB et Twitter suivent le bord gauche de l'écran. Le logo suit le bord droit. > Gros texte centre : helvetica neue std / 38pts / bold > Petit texte : helvetica neue std / 23pts / bold Mobile : Tablette : Jusqu'à 640px : > Background resizé et cropé sur les cotés gauches et droite. > Largeur boite noire = 10/12. Le tout reste centré sur x et y. (comportement systématique sur toutes les pages du site.) > La bulle disparaît. > footer : «footer_mobile.psd» Entre 640 et 1200 px : > Background resizé et cropé sur les cotés gauches et droite. > Largeur boite noire = 10/12. Le tout reste centré sur x et y. (comportement systématique sur toutes les pages du site.) > La bulle reste de la même taille et coulisse sur axe des x pour rester à 100px du bord de droite. Elle ne doit jamais être coupée par le bord haut de la page. Taille de texte de bulle inchangé. > footer : «footer_tablette.psd» Sur ce modèle, les icônes FB et Twitter suivent le bord gauche de l'écran. Le logo suit le bord droit.

5 4/ Specs Questions Desktop : Tablette : Mobile : Jusqu'à 1200px : > Resize homothétique des images cliquables et de leurs textes. > simple crop à droite et à gauche dans la bande noire pour la question. > question : helvetica neue std / 42pts / bold > réponse : helvetica neue std / 60pts / bold Entre 640 et 1200px : > Largeur d'images différents (voir maquette) Suit la grille /12 colones. > question : helvetica neue std / 55pts / bold > réponse : helvetica neue std / 64pts / bold En dessous de 640px : > Formats des réponses vertical, en bloc les unes sous les autres. Voir maquette. > question : helvetica neue std / 35pts / bold > réponse : helvetica neue std / 60pts / bold

6 5/ Specs Offre Desktop : Tablette : Mobile : > Specs similaires à celles de HP (plus haut) Sauf pour les textes (voir sur maquette). > Activer la grille sur maquette pour voir placements de blocs/champs/btns...

7 6/ Specs FAQ Desktop : Tablette : Mobile : > Specs similaires à celles de HP (plus haut) Sauf pour les textes (voir sur maquette). > Activer la grille sur maquette pour voir placements de blocs/champs/btns... > Au clic sur une question, la boite s'ouvre pour laisser apparaître la réponse. Au clic sur une nouvelle question, la précédente boite se ferme et la nouvelle s'ouvre. Si la réponse est plus longue que la hauteur de l'écran, on scroll. Sur tous les devices, le footer reste ferré à sa place.

8 7/ Comportements interactifs Btn HP : > Au rollover, le bouton devint blanc et le texte passe en orange #ff6600 > Au rollover, la case prend un filtre noir opacité 40%

Modèle de charte graphique

Modèle de charte graphique Modèle de charte graphique Pour donner à l utilisateur des repères au sein d un site et faciliter sa visite, il est impératif de développer une cohérence pour l ensemble de vos pages. Lors de la conception

Plus en détail

03.1/ couvertures catalogue général

03.1/ couvertures catalogue général 0./ couvertures général .. / Couvertures général / présentation Présentation La couverture Elle se compose d une têtière comprenant le filet arrondi et le logotype Hager placé en haut de la page, d une

Plus en détail

Charte webdesign des sous-sites de la Communauté française de Belgique. ISA 1.0 - DCP&P ETNIC l

Charte webdesign des sous-sites de la Communauté française de Belgique. ISA 1.0 - DCP&P ETNIC l Charte webdesign des sous-sites de la Communauté française de Belgique 1 ISA 1.0 - DCP&P ETNIC l Introduction Nous vous présentons ici des solutions techniques afin d intégrer les sites satellites de la

Plus en détail

CHARTE GRAPHIQUE annelaureperrone CHARTE GRAPHIQUE REZONNE

CHARTE GRAPHIQUE annelaureperrone CHARTE GRAPHIQUE REZONNE CHARTE GRAPHIQUE SOMMAIRE La charte graphique de REZONNE contient les principales règles d utilisation du logo. Son objectif est de conserver, à travers le temps, une cohérence graphique et une effi cacité

Plus en détail

Une Constitution pour l'europe. Guide graphique UNION EUROPÉENNE

Une Constitution pour l'europe. Guide graphique UNION EUROPÉENNE Guide graphique UNION EUROPÉENNE 1 Le Logo 2 La typographie générale 3 La signature du logo 4 Les couleurs du logo 5 Eléments graphiques constitutifs éléments fixes les couleurs la pagination 6 Deux exemples

Plus en détail

Croce & Associés Design du site internet

Croce & Associés Design du site internet Croce & Associés Design du site internet All rights reserved sàrl All content contained in this document remains the sole property of c:lynk creative network. Any use of this content - from concepts to

Plus en détail

CHARTE GRAPHIQUE. Cahier de normes UNÎMES juin 2008. UNÎMES Charte graphique ÉTINCELLE

CHARTE GRAPHIQUE. Cahier de normes UNÎMES juin 2008. UNÎMES Charte graphique ÉTINCELLE CHARTE GRAPHIQUE Cahier de normes juin 2008 1 SOMMAIRE Introduction Présentation de la charte.............................. 03 Logotype Couleurs & Identité visuelle............................ 04 Autopsie

Plus en détail

Spécifications Techniques Janvier 2016

Spécifications Techniques Janvier 2016 Spécifications Techniques Janvier 2016 Règles générales : Télécharger la dernière version à cette adresse : http://purch.fr/content/home/specificationstechniques_purch.pdf Adserver : DoubleClick For Publishers

Plus en détail

- SPECIFICATIONS FONCTIONNELLES - V2 DU 17/07/2015

- SPECIFICATIONS FONCTIONNELLES - V2 DU 17/07/2015 De : Alix Beltra Site Ligue contre le cancer 31 A : Marie-Ange Leophonte - SPECIFICATIONS FONCTIONNELLES - V2 DU 17/07/2015 Nombre de gabarits 4 1. OBJET DU DOCUMENT ET RÈGLES GÉNÉRALES Le présent document

Plus en détail

SOMMAIRE. Choisir le sens d impression de la page. Pages 3 et 4 Insérer un tableau. Fusionner des cellules. Orientation du texte

SOMMAIRE. Choisir le sens d impression de la page. Pages 3 et 4 Insérer un tableau. Fusionner des cellules. Orientation du texte Voici quelques fiches conseils pour faire un tableau avec WORD. On peut aussi utiliser une autre méthode qui consiste à dessiner le tableau. Nous l aborderons dans d autres fiches. Page 2 SOMMAIRE Choisir

Plus en détail

CHARTE LOGOTYPE EMPLOIS D AVENIR

CHARTE LOGOTYPE EMPLOIS D AVENIR CHARTE LOGOTYPE EMPLOIS D AVENIR NOVEMBRE 2012 UTILISATION HORS MEDIA Traitement du logotype avec signature Sur tout document édité ou émis, le logotype emplois d avenir est de préférence sur fond clair.

Plus en détail

JUMIA CHARTE GRAPHIQUE

JUMIA CHARTE GRAPHIQUE JUMIA CHARTE GRAPHIQUE SOMMAIRE 1. Le logotype 2. Visuels Onsite 1. Présentation... 4 1. Présentation... 9 2. Colorimétrie... 5 2. Sliders... 11 3. Intégration... 6 3. Main floors... 13 4. Autres usages

Plus en détail

Cahier des charges site web SIMPLY MARKET. Plus proche de vous

Cahier des charges site web SIMPLY MARKET. Plus proche de vous Cahier des charges site web SIMPLY MARKET Plus proche de vous HOMEPAGE La homepage se compose de 4 sections distinctes : - La HOME, mettant en scène les personnages menant aux différentes pages ENGAGEMENT.

Plus en détail

Analyse comparative de trois sites d'archives départementales. Florian Manin Alexandre Le Breton Jérémy Monier

Analyse comparative de trois sites d'archives départementales. Florian Manin Alexandre Le Breton Jérémy Monier Analyse comparative de trois sites d'archives départementales Florian Manin Alexandre Le Breton Jérémy Monier 1. Analyse critique du site des Archives Départementales d'illeetvilaine : Première impression

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

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,

Plus en détail

Photo filtre 7, collage spécial, initiation à la gestion des calques.

Photo filtre 7, collage spécial, initiation à la gestion des calques. Photo filtre 7, collage spécial, initiation à la gestion des calques. A - Travail préparatoire Télécharger depuis le blog le dossier fournitures oiseaux exotiques: ICI. Affichez le dossier dans Photo Filtre

Plus en détail

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE 1- Créer une planche 2- Indiquer les mesures 3- Indiquer le format de la page 4- Ajouter une bordure 5- Ajouter du texte 6- Ajouter une image

Plus en détail

GUIDE DE NORMES GRAPHIQUES IDENTITÉ VISUELLE

GUIDE DE NORMES GRAPHIQUES IDENTITÉ VISUELLE GUIDE DE NORMES GRAPHIQUES IDENTITÉ VISUELLE DÉCEMBRE 2015 IDENTITÉ VISUELLE Un ensemble entrelacé avec au cœur, l œil stylisé formant le O. Ce sigle domine dans toute sa finesse, son élégance et sa complexité.

Plus en détail

Thème Prestashop : 01 Oslo v1.0

Thème Prestashop : 01 Oslo v1.0 Thème Prestashop : 01 Oslo v1.0 (Pour Prestashop 1.6.0 au supérieur) Merci d avoir choisi 01 Oslo Table des matières Installation... 3 Installation automatique pour Prestashop 1.6.x... 3 Mise à jour du

Plus en détail

Ligne graphique web UNIL

Ligne graphique web UNIL Ligne graphique web UNIL pour les sites web institutionnels Jahia Centre informatique UNIL - version 2.0 - octobre 2015 1 Principe de fonctionnement général 2 Ligne graphique 1er niveau menu: max. 11 pages

Plus en détail

Analyse des sites d e-commerce

Analyse des sites d e-commerce Analyse des sites d e-commerce Lionel Borges Valentin Capitaine Axel Baron Julien Boulanger Site Analysé : http://www.cdiscount.com/ 1 ère impression : Négative : Des couleurs très agressives, des compteurs

Plus en détail

Option du thème. Naxialis Thèmes wordpress Professionnels. Le panneau «thème option» 1. Onglet «générale»

Option du thème. Naxialis Thèmes wordpress Professionnels. Le panneau «thème option» 1. Onglet «générale» Option du thème Le panneau «thème option» 1. Onglet «générale» - Insertion Image ou logo avec aperçu. - Réglage de la hauteur de l entête. (header) - Réglage de la marge supérieur et de gauche du logo

Plus en détail

Analyse comparative de trois sites d e commerce

Analyse comparative de trois sites d e commerce Analyse comparative de trois sites d e commerce M1105 Par Benjamin ANDRE Romain LUTIC - Jérémy MONIER (A/B) I/ Analyse des sites Amazon.com 1 ère 1 ère impression bonne, site épuré, bien organisé, on reconnait

Plus en détail

kit de communication Bloc marque Nantes Digital Week

kit de communication Bloc marque Nantes Digital Week kit de communication Bloc marque Nantes Digital Week Pourquoi ce kit? Le kit de communication vous permet de faire la promotion de la Nantes Digital Week, semaine dédiée aux cultures numériques à Nantes,

Plus en détail

Télévision Suisse Romande Identité visuelle - manuel d utilisation

Télévision Suisse Romande Identité visuelle - manuel d utilisation Télévision Suisse Romande Identité visuelle - manuel d utilisation L utilisation de ce matériel de communication est soumis à l autorisation du département Communication de la Télévision Suisse Romande.

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

Plus en détail

PAINT.NET. Est un logiciel gratuit de traitement d images. Il vous permettra entre autres :

PAINT.NET. Est un logiciel gratuit de traitement d images. Il vous permettra entre autres : PAINT.NET Est un logiciel gratuit de traitement d images. Il vous permettra entre autres : Corriger les défauts d une photographie : photo ancienne abimée, déchirée. Corriger les éléments indésirables

Plus en détail

Charte graphique P a r i s - s o r b o n n e

Charte graphique P a r i s - s o r b o n n e Charte graphique P a r i s - S o r b o n n e 1 Sommaire Logo...3 Couleurs...4 Typographie...6 Construction de la couverture et du dos...7 Animation graphique des pages intérieures...10 2 LOGO... Version

Plus en détail

Identité et Charte Graphique 2011

Identité et Charte Graphique 2011 Identité et Charte Graphique 2011 SOMMAIRE P 02 Logotype Familles Rurales P 03-04 Couleurs - Familles de produit P 05-06 Code typographique P 07 Univers iconographique P 08 Mise en page - Modèles P 09-15

Plus en détail

Inkscape : meilleur logiciel gratuit de traitement de dessin vectoriel VIDAL - CNR. Franck VI

Inkscape : meilleur logiciel gratuit de traitement de dessin vectoriel VIDAL - CNR. Franck VI Inkscape : meilleur logiciel gratuit de traitement de dessin vectoriel Avant Installer Document Repères Calques Fond Texte Images Finaliser Exporter Qu est ce que le dessin vectoriel? ESPACE VECTORIEL

Plus en détail

F.A.Q 1.0 Designer 3D Atex System

F.A.Q 1.0 Designer 3D Atex System -Sommaire- 1-Comment installer le logiciel?...2 2-Comment créer un projet?...3 3-Comment ouvrir un projet?...4 4-Comment se déplacer en 2D & 3D?...5 5-Comment ajouter des composants?...6 1-Comment installer

Plus en détail

Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/

Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/ Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/ La semaine dernière Introduction à Omnigraffle Environnement de travail Diagrammes Wireframes

Plus en détail

styles de fenètres, et portes.

styles de fenètres, et portes. Autocad Architecture 2008. styles de fenètres, et portes. Ouvrez votre fichier "manorme02" et renommer en "manorme03" A_ représentation en plan. Objectif: placer les deux tapées d'isolation sur la fenètre.

Plus en détail

I N VE N T AI R E M AT E R I E L D E B U R E AU A VE N D R E

I N VE N T AI R E M AT E R I E L D E B U R E AU A VE N D R E I N VE N T AI R E M AT E R I E L D E B U R E AU A VE N D R E Armoires : A01 - Bloc 4 tiroirs à dossiers suspendus : - profondeur : 72 cm - largeur : 48 cm - hauteur : 133 cm Remarque : ne ferme pas à clé

Plus en détail

METTRE EN FORME. Colonnes et lignes. Largeur des colonnes

METTRE EN FORME. Colonnes et lignes. Largeur des colonnes METTRE EN FORME Vous apprendrez dans cette partie à utiliser plusieurs outils pour mettre en forme les cellules, mais aussi le contenu des cellules, afin de faciliter la lecture de vos tableaux. Colonnes

Plus en détail

INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN. Mélanie TETART DIRECTION DES TECHNOLOGIES R ESPONSABLE DES P ROJETS W EBDESIGN

INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN. Mélanie TETART DIRECTION DES TECHNOLOGIES R ESPONSABLE DES P ROJETS W EBDESIGN INTRANET CHARTE GRAPHIQUE DES INTRANETS JUIN 2006 DIRECTION DES TECHNOLOGIES Mélanie TETART R ESPONSABLE DES P ROJETS W EBDESIGN 01 40 39 63 28 - melanie.tetart@bfbp.banquepopulaire.fr 2 Sommaire OBJECTIFS

Plus en détail

Adobe Indesign. L art de la mise en page CHAPITRE 2

Adobe Indesign. L art de la mise en page CHAPITRE 2 M2 Caweb 2014-2015 Enseignant : Boris Epp Adobe Indesign L art de la mise en page CHAPITRE 2 Sommaire 1. Les blocs a. Types de blocs b. Manipuler les blocs c. Interactions entre les blocs d. Appliquer

Plus en détail

18 décembre 2008. 78 av. des Champs Elysées, 75 008 Paris, France. +33 1 53 57 79 31

18 décembre 2008. 78 av. des Champs Elysées, 75 008 Paris, France. +33 1 53 57 79 31 18 décembre 2008 78 av. des Champs Elysées, 75 008 Paris, France. +33 1 53 57 79 31 Sommaire Spécifications fichiers Flash p 3.. Scripts Rich-Média p 12 Vidéo p 41 2 Spécifications pour fichiers Flash

Plus en détail

Utilisation de l éditeur.

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

Plus en détail

Office - Le menu Dessin La barre d'outil Dessin

Office - Le menu Dessin La barre d'outil Dessin Office - Le menu Dessin La barre d'outil Dessin Le module de dessin d'office est un logiciel de dessin vectoriel*. Il crée des figures géométriques en les transformant en équation dites courbes de Béziers*

Plus en détail

Formation de base pour le logiciel Scribus

Formation de base pour le logiciel Scribus Formation de base pour le logiciel Scribus Cette formation tend à donner une base minimum sur le logiciel Scribus afin de produire des tracts ou affiches tape l'œil. Évidemment d'autres options plus poussées

Plus en détail

Mettre une icône pour le fichier exécutable de PicturesToExe

Mettre une icône pour le fichier exécutable de PicturesToExe Mettre une icône pour le fichier exécutable de PicturesToExe Je choisis une image du diaporama : Il est bien évident que le texte : «racontée par Jean-Pierre Chabrol» ne passera pas dans l image de l icône,

Plus en détail

Séquence 2 Durée : 0,5 sec. Des bandes bleu-grises s intègrent à la page, certaines partent d en haut et d autres d en bas.

Séquence 2 Durée : 0,5 sec. Des bandes bleu-grises s intègrent à la page, certaines partent d en haut et d autres d en bas. cours de par Séquence 1 Durée : 1,5 sec. Tout d abord, le logo d Ulysse apparaît en opacité sur un fond blanc. Il demeure à 100 % quelques instants, puis disparait en fondu. Séquence 2 Durée : 0,5 sec.

Plus en détail

Le tableur de la suite Open Office

Le tableur de la suite Open Office Le tableur de la suite Open Office Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO), dessin et édition de pages Web au format

Plus en détail

>>>>>2007. >Charte graphique. Université Blaise Pascal

>>>>>2007. >Charte graphique. Université Blaise Pascal >>>>>2007 >Charte graphique Université Blaise Pascal C l e r m o n t - F e r r a n d Une nouvelle image Cette charte graphique permet à tout utilisateur de s'approprier les principes de base de l'identité

Plus en détail

Travailler avec Photofiltre

Travailler avec Photofiltre Travailler avec Photofiltre 1 - Isoler / Sélectionner une zone d'une image et définir sa forme Les sélections vectorielles Sélectionnez une forme en cliquant sur le bouton la représentant dans la palette

Plus en détail

05/ Communication tools

05/ Communication tools 05/ Communication tools 05.3/ Product/atmosphere roll-up advertisements 5.3. / Annonces publicitaires produit-ambiance roll-ups / introduction Introduction Ci-contre, les exemples de mise en page pour

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Ciblez votre recherche à l aide de filtres pertinents affichés au centre de la page.

Ciblez votre recherche à l aide de filtres pertinents affichés au centre de la page. L objectif du présent document consiste à offrir une vue d ensemble des caractéristiques du nouveau site Web de Richelieu. Notre principale tâche au niveau de la conception du site visait à rendre les

Plus en détail

Comment adapter une annonce presse Ecofolio au format dont vous avez besoin?

Comment adapter une annonce presse Ecofolio au format dont vous avez besoin? Comment adapter une annonce presse Ecofolio au format dont vous avez besoin? Ce manuel décrit les étapes pour adapter proportionnellement un gabarit sous InDesign «annonce presse Ecofolio» (210 x 297 mm)

Plus en détail

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

1. Dans l onglet Insertion, cliquez sur WordArt et sélectionnez le style Style16

1. Dans l onglet Insertion, cliquez sur WordArt et sélectionnez le style Style16 TP N 4 : étapes à suivre 1 TP Bureautique 1 ère MIAS 2012/2013 Pour créer L objet WordArt encadré : 1. Dans l onglet Insertion, cliquez sur WordArt et sélectionnez le style Style16 2. Tapez Ordinateur

Plus en détail

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau»

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau» L email responsive Optimisez vos campagnes pour les smartphones Guillaume Fleureau» Sarbacane Software Editeur de solutions e-marketing Implantée à Lille et à Barcelone Société créée en 2001 40 collaborateurs

Plus en détail

Générez votre fichier PDF sur PC avec CutePDF writer

Générez votre fichier PDF sur PC avec CutePDF writer Ce Guide vous explique les procédures informatiques à suivre pour générer votre fichier au format PDF avec le logiciel CutePDF Writer sur un PC. Le format PDF est le meilleur moyen de transmission de votre

Plus en détail

Aide-mémoire pour script et automatisation avec Photoshop

Aide-mémoire pour script et automatisation avec Photoshop Aide-mémoire pour script et automatisation avec Photoshop Le but est de créer des scripts qui seront utilisés pour préparer un grand nombre de photos pour un site web ou pour un concours. Les actions suivantes

Plus en détail

Nom :... Prénom :... Classe :... Techniques infographiques. InDesign

Nom :... Prénom :... Classe :... Techniques infographiques. InDesign Nom :... Prénom :... Classe :... Techniques infographiques InDesign 1 Insertion de blocs textes et images (bases) a Création d un nouveau document...p04 b Le plan de travail...p05 c Les outils de base...p06

Plus en détail

Réalisation d'une brochure PDF en A4 avec SCRIBUS

Réalisation d'une brochure PDF en A4 avec SCRIBUS Réalisation d'une brochure PDF en A4 avec SCRIBUS 1/ planifier son travail quelle cible en terme de population? quelle format? quelle sortie? Écran, print N&B, couleur... s'inspirer de brochures publicitaires,

Plus en détail

CHARTE GRAPHIQUE. de l académie de Dijon. Guide d utilisation des logotypes Applications au rectorat MINISTÈRE DE L ÉDUCATION NATIONALE

CHARTE GRAPHIQUE. de l académie de Dijon. Guide d utilisation des logotypes Applications au rectorat MINISTÈRE DE L ÉDUCATION NATIONALE CHARTE GRAPHIQUE de l académie de Dijon Guide d utilisation des logotypes Applications au rectorat académie Dijon MINISTÈRE DE L ÉDUCATION NATIONALE MINISTÈRE DE L ENSEIGNEMENT SUPÉRIEUR ET DE LA RECHERCHE

Plus en détail

Traitement de texte LIBRE - OFFICE WRITER

Traitement de texte LIBRE - OFFICE WRITER Traitement de texte LIBRE - OFFICE WRITER POUR : PAGE - Outil de base 2 - Encadrer un titre,un paragraphe. 3 - Créer un tableau. 4 - Modifier la largeur des colonnes dans un tableau. 5 - Modifier la hauteur

Plus en détail

identité visuelle et charte graphique groupe et filiales

identité visuelle et charte graphique groupe et filiales identité visuelle et charte graphique groupe et filiales partie A attributs de la marque Les essentiels de la charte LES ATTRIBUTS DE LA MARQUE GROUPE et de ses filiales Face à la pluralité de notre offre,

Plus en détail

Spécificités Techniques créations publicitaires

Spécificités Techniques créations publicitaires Spécificités Techniques créations publicitaires 2012 Sommaire Presentation p3 Sky Flottant 120x600 p17 Spec : Clicktag p4 Flash Transparent 400x400 p18 Spec : Flash transparent / Interstitiel p5 Flash

Plus en détail

Charte graphique & Identité visuelle

Charte graphique & Identité visuelle Charte graphique & Identité visuelle S.I.S.T.E.M Provence SOMMAIRE Ce projet est en collaboration avec Made with Curiosity. Designer : Florent DABERNAT (ID SEED) Consultante en stratégie: Amandine LANTELME

Plus en détail

RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER»

RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER» RÉALISATION D UNE IDENTITÉ VISUELLE ET D UN SITE INTERNET POUR LA NOUVELLE CHAINE «6TER» EXAMEN GÉNÉRAL//WEB3AN/2012 JÉRÔME BRAZ SOMMAIRE Contexte / Projet ------- p1 Roughs ------- p2 Roughs Vectorisés

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

Contenu 1. LA MARQUE 2. VERSIONS STANDARDS DU LOGO 3. COULEURS 4. VERSIONS MONOCHROMATIQUES DU LOGO

Contenu 1. LA MARQUE 2. VERSIONS STANDARDS DU LOGO 3. COULEURS 4. VERSIONS MONOCHROMATIQUES DU LOGO A BRAND OF 1 Contenu 1. LA MARQUE 2. VERSIONS STANDARDS DU LOGO 3. COULEURS 4. VERSIONS MONOCHROMATIQUES DU LOGO 5. SPÉCIFICATIONS: ZONE PROTÉGÉE ET PLACEMENT DU LOGO 6. METTRE À L ÉCHELLE ET TAILLE MINIMALE

Plus en détail

LIVRET DE FORMATION SPIP RÉDACTEURS / ADMINISTRATEURS. 9 rue des 3 rois 13006 Marseille 09 53 76 67 36

LIVRET DE FORMATION SPIP RÉDACTEURS / ADMINISTRATEURS. 9 rue des 3 rois 13006 Marseille 09 53 76 67 36 LIVRET DE FORMATION SPIP RÉDACTEURS / ADMINISTRATEURS Connexion à l'espace privé dans la barre d'adresse du navigateur ajouter /ecrire ex: http://monsite.org/ecrire En cas d'utilisation d'un ordinateur

Plus en détail

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE Edités par la Mobile Marketing Association France, juin 2010 http://www.mmafrance.org La Mobile Marketing Association France, association

Plus en détail

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012 Identité visuelle de l Manuel Internet, Intranet et applications Web Janvier 202 Charte graphique Internet, Intranet et applications Web 6.0 Internet, Intranet et applications Web Sommaire 6. Généralités:

Plus en détail

Le module Livres. 2012 Pearson France Lightroom 4 Gérard Michel-Duthel

Le module Livres. 2012 Pearson France Lightroom 4 Gérard Michel-Duthel 10 Le module Livres 10 n Le module Livres Adobe a ajouté à la quatrième version de Lightroom un module Livres. Totalement intégré au logiciel, il va vous permettre de créer des livres de photos et de les

Plus en détail

FITZCO MULTIMEDIA. Word 2007. les tableaux

FITZCO MULTIMEDIA. Word 2007. les tableaux FITZCO MULTIMEDIA les tableaux 2 Sommaire EXERCICE 1 : CRÉER UN TABLEAU... 3 EXERCICE 2... 8 EXERCICE 3 : INSÉRER DES IMAGES... 11 EXERCICE 4 : CONVERTIR UN TEXTE EN TABLEAU... 16 3 EXERCICE 1 : CRÉER

Plus en détail

2. L'assistant Papier à lettres s'ouvre alors. Cliquez sur le bouton Suivant.

2. L'assistant Papier à lettres s'ouvre alors. Cliquez sur le bouton Suivant. Pour personnaliser vos messages, vous utilisez certainement les papiers à lettres qui viennent avec Outlook Express. Vous choisissez alors votre papier à lettres dans la liste qui apparaît après avoir

Plus en détail

Initiation à Photoshop

Initiation à Photoshop 56 / 81 Scanner une image Un Scanner transforme une image papier en un fichier numérique Pour cela il faut définir: le type d image (couleur, niveau de gris ou texte) la résolution en dpi ou ppp (point

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

ÉDITEUR MANUAL D UTILISATION :

ÉDITEUR MANUAL D UTILISATION : MANUAL D UTILISATION : ÉDITEUR Système «drag & drop» :... 2 1. Gestionnaire de contenus... 3 2. Éditeur du style... 5 3. Ajouter des éléments... 6 4. Annuler/Rétablir... 13 5. Enregistrer... 13 Quand nous

Plus en détail

Nvu - KompoZer. Table des matières. Tuto rapido

Nvu - KompoZer. Table des matières. Tuto rapido Nvu - KompoZer Table des matières 1. Démarrage rapide...2 1.1. Créer une nouvelle page...2 1.2. Ouvrir une page existante...2 1.3. Enregistrer une page...2 2. Utiliser KompoZer...3 2.1. L'interface...3

Plus en détail

Diapositive 1 : Organigramme PC-LAND 1) 2) 3) 4)

Diapositive 1 : Organigramme PC-LAND 1) 2) 3) 4) Nous allons voir un usage plus professionnel de PowerPoint, la réalisation d un organigramme hiérarchique. Nous allons réaliser l organigramme du forum PC- Land. Ouvrir PowerPoint / accueil. Par défaut

Plus en détail

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

Plus en détail

Manuel utilisateur de la personnalisation avancée

Manuel utilisateur de la personnalisation avancée Manuel utilisateur de la personnalisation avancée Sommaire 1. HISTORIQUE DU DOCUMENT... 3 2. CONTACTER L'ASSISTANCE TECHNIQUE...4 3. PERSONNALISER VOS PAGES DE PAIEMENT ET VOS E-MAILS...5 3.1. Identifier

Plus en détail

FICHE 9 : INSERER UNE IMAGE

FICHE 9 : INSERER UNE IMAGE FICHE 9 : INSERER UNE IMAGE Vous avez la possibilité dans Publisher tout comme dans Word d insérer une image clipart, une image personnelle à partir d un fichier ou une image à scanner. Vous pouvez également

Plus en détail

TUTORIEL CartoDB www.cellie.fr 11/03/15

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

Plus en détail

CAHIER DE PRODUCTION LE CÉDÉROM - GUIDES ULYSSE. SOMMATIF Production multimédia I

CAHIER DE PRODUCTION LE CÉDÉROM - GUIDES ULYSSE. SOMMATIF Production multimédia I CAHIER DE PRODUCTION LE CÉDÉROM - GUIDES ULYSSE 2e SOMMATIF Production multimédia I Sophie Lavoie ET SCÉNARISATION DE L INTRODUCTION 1re RÉSOLUTION : 1400 x 700 px MUSIQUE : introduction.mp3 DURÉE : 3

Plus en détail

Créer une mosaïque de photos - AndreaMosaic

Créer une mosaïque de photos - AndreaMosaic Créer une mosaïque de photos - AndreaMosaic Vous avez sans doute déjà admiré des photos créées à partir d'un assemblage de centaine de clichés. Ces mosaïques mettent de côté la singularité de chaque photo

Plus en détail

Worldsoft Image Manager 1

Worldsoft Image Manager 1 Worldsoft Image Manager 1 Remarque: Le nouveau gestionnaire d image fonctionne uniquement si le Responsive Design est autorisé >> Vous trouverez cette option dans Administration/Paramètres généraux. Table

Plus en détail

Dessiner avec GIMP - Introduction des calques

Dessiner avec GIMP - Introduction des calques Dessiner avec GIMP - Introduction des calques Comme nous l avons signalé précédemment, GIMP comme PS sont des logiciels d infographie, nous allons donc créer notre première image. Ouvrir une feuille et

Plus en détail

Commencer avec Catia V5

Commencer avec Catia V5 Commencer avec Catia V5 Petit tutoriel pour faire ses premiers pas sous Catia V5 : Partie 1 : Création d une pièce simple Remarque : les barres de boutons ne sont jamais au bon endroit, alors les replacer

Plus en détail

Passeport Web 09. Introduction Architecture Règles de déclinaison

Passeport Web 09. Introduction Architecture Règles de déclinaison Passeport Web 09 Introduction Architecture Règles de déclinaison Introduction A propos Planche d intentions A propos Voyage au cœur de la marque numérique L objectif de ce document est de garantir une

Plus en détail

Créer une carte de visite Avec Open Office Writer

Créer une carte de visite Avec Open Office Writer Introduction Créer une carte de visite Concurrent direct de Microsoft Office, OpenOffice.org est une suite bureautique gratuite. Aujourd hui nous voyons le programme Writer (comparable à Word), c'est-à-dire

Plus en détail

Personnaliser son bureau

Personnaliser son bureau Changer la résolution d'écran Définition : la résolution (exprimée en pixels de largeur x hauteur) indique la finesse d'affichage de votre écran. Plus cette résolution est grande, plus l'affichage est

Plus en détail

Fiche n 2 Cadre texte & Cadre Image. Table des matières

Fiche n 2 Cadre texte & Cadre Image. Table des matières Fiche n 2 Cadre texte & Cadre Image Table des matières 1-Les textes...1 1.1-Créer un cadre texte...1 1.2-Éditer le texte...1 1.3-Paramétrer le texte...2 1.4-Dégrouper un texte...3 1.5-Convertir une lettre

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Impression de documents avec Optymo

Impression de documents avec Optymo Impression de documents avec Optymo Notes de lecture : dans ce document, les textes soulignés font référence aux libellés des fenêtres ou aux libellés associés à des boutons d Optymo. Les textes en caractères

Plus en détail

Support de formation pour le recadrage de vos images afin de les insérer dans image à la une :

Support de formation pour le recadrage de vos images afin de les insérer dans image à la une : Support de formation pour le recadrage de vos images afin de les insérer dans image à la une : l architecte de votre image 01 - Vous allez apprendre à recadrer et sélectionner une partie de votre photo

Plus en détail

-PhotoFiltre Studio. -Largeur=800. -Hauteur=600. -Automatique coché. -Position: centre. -Largeur:300. -Hauteur:110.

-PhotoFiltre Studio. -Largeur=800. -Hauteur=600. -Automatique coché. -Position: centre. -Largeur:300. -Hauteur:110. Un tutoriel pour réaliser un livre ouvert comme ceci Matériel: -PhotoFiltre Studio. Nous allons commencer par construire une page: Ouvrez un nouveau document: -Menu fichier ==>> Nouveau. -Largeur=800.

Plus en détail

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23 Site agrogembloux.be - document public COMMISSION PHOTO Programme pour adapter les photos au site internet et Mode d emploi pour uploader les photos sur le site Version 2015.02.23 (dernière version toujours

Plus en détail

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr Titre Paramétrer et personnaliser le style GENBIB Rubrique 6. Opac 6.1.2 Auteur Edith Boulo Version PMB : 3.4.16 Date de création : 03/06/2013 Date de modification : 1. Paramétrage par défaut Voici un

Plus en détail