Créer un menu adaptable à toutes les résolutions

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Créer un menu adaptable à toutes les résolutions"

Transcription

1 Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur indiquera la section dans laquelle se trouve le visiteur, l'intitulé du lien et un sous titre donnant plus de détails sur le contenu de la page. 1 / 13

2 Etape : 1/23 Etape : 2/23 Le menu s'adapte automatiquement à la résolution de l'écran utilisé et les éléments superflus comme le curseur et les soustitres sont masqués pour les petits écrans. Celui-ci se transforme en menu rétractable pour les utilisateurs de smartphones. 2 / 13

3 Etape : 3/23 Nous utiliserons ici une structure basée sur HTML5. Le menu sera donc placé dans un élément, lui meme contenu dans un élément, et sera plutot simple dans sa structure : une liste non ordonnée dans laquelle chaque élément contiendra également une liste non ordonnée de trois items curseur, intitulé du lien et sous-titre du lien. Coté code, nous obtiendrons donc ceci. Etape : 4/23 Nous allons maintenant nous occuper de la création de nos liens. Chaque balise contenue dans une balise sera enveloppée dans un lien. Comme expliqué précédemment, chaque lien est constitué de trois éléments correspondants aux trois balises qui les composent. Ce qui nous donnera, dans l'ordre, l'intégration du curseur actif pour la page en cours, l'intitulé du lien et enfin son sous-titre 3 / 13

4 Etape : 5/23 Avant d'aller plus loin, nous allons modifier des éléments, par exemple supprimer les puces affichées sur les listes, modifier la couleurs de liens, etc. Nous en profiterons également pour définir un style à notre balise en lui donnant un motif de fond, une typographie et une taille de police adaptée. Dans la feuille de style menu-responsive.css, nous allons donc écrire le code ci dessus. Etape : 6/23 Mise en place du menu 4 / 13

5 Etape : 7/23 Nous partirons du principe que le site dans lequel sera intégré le menu fera 960 pixels de largeur maximale. Celui-ci sera placé en haut de la fenetre du navigateur et devra toujours etre au centre de l'écran. Nous allons donc envelopper notre élément dans un ayant pour id="center". Coté HTML Etape : 8/23 Et coté CSS 5 / 13

6 Etape : 9/23 Intégrons tous les liens horizontalement, puis nous centrerons le texte dans chacun d'eux. Créons ensuite des classes pour définir un style à chaque élément.les intitulés de liens auront un visuel renforcé ainsi qu'une ombre interne blanche pour apporter un peu de relief. Les sous-titres auront une taille plus faible et seront affichés en italique.définissons leurs styles dans menu-responsive.css Etape : 10/23 Intégrons maintenant nos balises HTML et attribuons leur leurs règles de styles spécifiques : 6 / 13

7 Etape : 11/23 Nous allons créer un fond en dégradé, que nous réaliserons avec CSS3. La syntaxe des dégradés CSS3 et assurer une compatibilité avec les différents navigateurs étant toujours un peu laborieux, je vous propose d'utiliser un très bon outil en ligne qui se chargera de nous fournir le code CSS3 du dégradé voulu et un simple copiercoller suffira à son intégration dans notre feuille de styles. Etape : 12/23 Le HTML étant maintenant en place, occupons nous de la partie CSS du background. Celui-ci cevra couvrir toute la largeur du site, avoir une fine bordure, une ombre portée et évidemment afficher un dégradé. Nous appliquerons une marge supérieure négative au menu afin de placer celui-ci au dessus du dégradé : 7 / 13

8 Etape : 13/23 Avec Web Developer, nous constatons qu'un premier problème survient lorsque l'affichage du navigateur est = ou Etape : 14/23 Maintenant que le menu est adapté pour les écrans de bureau et la majorité des tablettes, il nous faut l'optimiser pour une utilisation sur smartphones et écrans de moins de 800 pixels.nous allons donc créer et ajouter aux liens une classe nommée "smartphones-links" afin de pouvoir leur donner un design, les rendants ainsi plus visibles. 8 / 13

9 Etape : 15/23 Et pour notre code CSS : Etape : 16/23 Occupons-nous du bouton "menu". Nous allons dans un premier temps l'ajouter à notre code HTML, juste au-dessous de l'ouverture de la. Le bouton est simplement constitué d'un lien placé dans une. Je lui attribue égamenment la class "bold" afin de renforcer son visuel. Intégrons le à notre code HTML. 9 / 13

10 Etape : 17/23 Occupons nous maintenant de son affichage. Celui-ci ne doit etre visible qu'en dessous de 800 pixels de largeur de résolution. Nous allons donc lui aplliquer un "display:none" par défault et un "display:block" pour notre media queries max-width: 800px. Dans notre feuille css Etape : 18/23 Donnons maintenant aux visiteurs mobiles la possibilité de rétracter le menu. Pour ce faire, nous allons utiliser la bibliothèque JQuery et la fonction "slidetoggle". Pour pouvoir utiliser la bibliothèque JQuery, il nous faut tout d'abord l'appeller dans notre feuille HTML en insérant le codes uivant dans le de notre page 10 / 13

11 Etape : 19/23 Pour pouvoir faire fonctionner notre slide, nous allons ajouter un id, nommé "menu-scroll", au lien contenu dans notre "bouton-menu". Celui-ci va nous permettre d'écouter et de détecter un évènement qui déclenchera le slide. Le slide sera alors appliqué à l'élément grace à la fonction "slidetoggle". Nous lui attribuerons également une vitesse de rétractation plutot lente. Etape : 20/23 Ca y est, notre menu coulisse bien lorsque nous cliquons sur le bouton "menu". Seule ombre au tableau, les éléments se chevauchent de façon anarchique... Nous aloons y rmédier grace à quelques lignes de code CSS en utilisant la propriété Zindex 11 / 13

12 Etape : 21/23 Supprimer les curseurs: Pour supprimer les curseurs, nous allons d'abord leur ajouter une classe "curseur" dans le code HTML. Puis, dans la media queries dédiée aux écrans de 800 pixels et moins, nous lui appliquerons un "display:none;". Coté HTML Etape : 22/23 Coté CSS. Notre création d'un menu Responsive est maintenant terminée. Il ne vous reste plus qu'à retravailler un peu le code CSS afin de personnaliser cet exemple et le mettre en accord avec le design de votre site. 12 / 13

13 Etape : 23/23 13 / 13 Powered by TCPDF (www.tcpdf.org)

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

Tableaux sous Word 2010, Insertion d images.

Tableaux sous Word 2010, Insertion d images. Tableaux sous Word 2010, Insertion d images. Révisions générales. Pour réaliser le trombinoscope du Groupe. Ouvrir le logiciel Word 2010, et enregistrer ce nouveau fichier sur votre clé, dans le dossier

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

Mode d'emploi site web ghb.fr

Mode d'emploi site web ghb.fr Mode d'emploi site web ghb.fr Menu de l'interface d'administration Gestion contenus: vous permet d'éditer et de créer des pages ainsi que des post-it Gestion blocs: Le site est défini en 3 zones menu,

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

Travaux dirigés n 10

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

Plus en détail

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle Création de page Web Microsoft Publisher 1. Ouvrez Microsoft Publisher 2. Cliquez sur Sites Web 3. Choisissez un modèle 4. Personnalisez votre jeu de couleurs et les options 5. Cliquez sur «créer», lorsque

Plus en détail

Groupe Eyrolles, 2006, ISBN : 2-212-11771-X

Groupe Eyrolles, 2006, ISBN : 2-212-11771-X Groupe Eyrolles, 2006, ISBN : 2-212-11771-X Création de pages dynamiques courantes CHAPITRE 3 169 Figure 3-39 La boîte de dialogue de l objet Liste/Menu permet de configurer les options de l affichage

Plus en détail

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

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

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

UTILISATION D'OPEN OFFICE, LE TRAITEMENT DE TEXTE WRITER

UTILISATION D'OPEN OFFICE, LE TRAITEMENT DE TEXTE WRITER UTILISATION D'OPEN OFFICE, LE TRAITEMENT DE TEXTE WRITER Les raccourcis claviers indispensables : CTRL + C = COPIER CTRL + X = COUPER CTRL + V = COLLER CTRL + A = Tout sélectionner Le texte Le paragraphe

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

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés. TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec

Plus en détail

script sous photoshop, mode d emploi

script sous photoshop, mode d emploi script sous photoshop, mode d emploi sommaire préambule... 2 un grand classique... 3 on se lance... 3 les traitements... 5 la signature... 8 cadre et ombre... 9 utilisation... 15 aller plus loin... 16

Plus en détail

Tutoriel : Feuille de style externe

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?

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Débuter avec GIMP. Novembre 2013

Débuter avec GIMP. Novembre 2013 Débuter avec GIMP Novembre 2013 Sommaire 1. Télécharger GIMP 2. L'interface 3. La boîte à outils 4. Gestion des documents 5. La résolution et les pixels de l'image 6. L'enregistrement 7. Les couleurs 8.

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

Les Tableaux sous Word

Les Tableaux sous Word Les Tableaux sous Word Comme pour les images, la sélection d un tableau ouvre un menu contextuel qui va s adresser au tableau. Ce menu "les outils du tableau" propose 2 onglets, Création et Disposition.

Plus en détail

LE TRAITEMENT DE TEXTE : WORD. Son utilisation

LE TRAITEMENT DE TEXTE : WORD. Son utilisation 1 Didacticiel réalisé par Patricia Wasko Netsteward Administration Communale de Seneffe Service Informatique - 2004 LE TRAITEMENT DE TEXTE : WORD Son utilisation Un logiciel de traitement de texte est

Plus en détail

Créer sa première base de données Access Partie 4/4 - Création d un état

Créer sa première base de données Access Partie 4/4 - Création d un état - le 19/02/2013 Créer sa première base de données Access Partie 4/4 - Création d un état Ce tutoriel est la suite de l article sur la création d une table, l article sur la création d une requête et l

Plus en détail

Tutoriel d'utilisation du site PEEP

Tutoriel d'utilisation du site PEEP Tutoriel d'utilisation du site PEEP Intro Le site, ape-niort.peep.asso.fr, est géré par un système de gestion de contenu (ici Mura CMS). Un CMS permet, entre autre, de générer un site de manière rapide

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

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

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

1. Ajouter des dessins

1. Ajouter des dessins 1. Sommaire 1. Ajouter des dessins 2. Ajouter des formes 3. Ajouter un tableaux ou un diagramme 4. Modifier l arrière-plan de la diapositive 5. Mettre un numéro de page 6. Les effets d animations 7. Les

Plus en détail

Manuel d'utilisation de l'espace privé d'un site SPIP Partie I : les rédacteurs

Manuel d'utilisation de l'espace privé d'un site SPIP Partie I : les rédacteurs Manuel d'utilisation de l'espace privé d'un site SPIP Partie I : les rédacteurs 1.L'accès à l'espace privé 1.1.Espace privé L'espace privé est la particularité d'un site SPIP, c'est là que se trouvent

Plus en détail

Comment écrire un article pour le site HCE?

Comment écrire un article pour le site HCE? Comment écrire un article pour le site HCE? Explication courte Les explications courtes sont les meilleures. Naviguez sur http://www.hce.asso.fr/ecrire/ et laissez-vous guider par les écrans. Explication

Plus en détail

Documentation Utilisateur CARTE CADEAU

Documentation Utilisateur CARTE CADEAU Documentation Utilisateur CARTE CADEAU Le module CARTE CADEAU vous permet de proposer sur votre boutique des cartes cadeaux du montant que vous souhaitez. Chaque client peut ensuite en acheter sur votre

Plus en détail

I Open Résa. Sommaire :

I Open Résa. Sommaire : I Open Résa Sommaire : I Open Résa... 1 Définition :... 2 Identification... 3 Création d un nouveau dossier :... 8 Première méthode :... 10 Seconde méthode :... 10 Ajout d éléments à la proposition :...

Plus en détail

Utiliser un modèle d état prédéfini

Utiliser un modèle d état prédéfini Chapitre 8 Etats rapides Certains boutons sont désactivés, en fonction du type de cellule sélectionné. 4 Répétez les étapes 2 et 3 pour chaque bordure à paramétrer. 5 Cliquez sur le bouton OK pour valider

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

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...

Plus en détail

Com mencer. Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me.

Com mencer. Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me. Commencer 1 - Se créer un compte 3 - Accès à l éditeur L interface U.me Éditer un U.me Prévisualiser votre site web mobile Publier votre site web mobile Contenu général 1- Les boutons a - Intégrer un bouton

Plus en détail

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

Plus en détail

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 1 Janvier KEIFLIN Cédric 2 Janvier Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 3 Janvier Mes sites

Plus en détail

Écran Tactile (4-F) Configuration générale

Écran Tactile (4-F) Configuration générale Écran Tactile (4-F) C'est dans ce menu que vous pourrez créer le ou les écrans tactiles. Vous pourrez y former les boutons, choisir leur couleur et leur assigner des fonctions. N.B. Le premier menu, le

Plus en détail

Eclipse et quelques notions de Jquerry

Eclipse et quelques notions de Jquerry Eclipse et quelques notions de Jquerry Tout d abord, une petite présentation s impose. Eclipse est un outil de développement qui permet d éditer du code et de visualiser le résultat grâce à des émulateurs

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

SOMMAIRE Logiciel PowerPoint

SOMMAIRE Logiciel PowerPoint SOMMAIRE Logiciel PowerPoint Lancement du logiciel... Création d'une diapositive La barre d'outils supérieure. La barre d'outils inférieure... L'arrière-plan d'une diapositive.. Insertion d'une image de

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

Plus en détail

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I) Introduction 1) Présentation Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs, de

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

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

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

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

Plus en détail

Word 2010 initiation Guide de formation avec exercices et cas pratiques

Word 2010 initiation Guide de formation avec exercices et cas pratiques Word 2010 initiation Guide de formation avec exercices et cas pratiques Tsoft et Groupe Eyrolles, 2011, ISBN : 978-2-212-12879-6 METTRE EN PAGE 4 SAUT DE PAGE ET SAUT DE SECTION INSÉRER UN SAUT DE PAGE

Plus en détail

ITS WebManager 3.01. Mode d emploi pour l utilisateur du CMS

ITS WebManager 3.01. Mode d emploi pour l utilisateur du CMS ITS WebManager 3.01 Mode d emploi pour l utilisateur du CMS ITS Informatique Route de la Bourgeoisie 17 1963 Vétroz Tél. +41(0)27/346 55 92 info@its-informatique.ch www.its-informatique.ch 1. Introduction

Plus en détail

TP5 : Réalisation d un CV

TP5 : Réalisation d un CV TP5 : Réalisation d un CV Pour cette séance de TP, je vous propose de réaliser votre CV. Comme vous êtes par binôme, je vous demande à ce que chaque étudiant fasse son propre CV. Word propose des modèles

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.

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

Plus en détail

Design Product. Guide d'utilisation. v0.3.4. Auguria 26 bis rue des Olivettes 44000 NANTES FRANCE +33251135012 contact@auguria.net

Design Product. Guide d'utilisation. v0.3.4. Auguria 26 bis rue des Olivettes 44000 NANTES FRANCE +33251135012 contact@auguria.net Design Product Guide d'utilisation v0.3.4 Auguria 26 bis rue des Olivettes 44000 NANTES FRANCE +33251135012 contact@auguria.net Plan 1 Présentation du module...3 2 Mise en place du module...4 2.1 Compatibilité

Plus en détail

Intranet d'établissement avec Eva-web Document pour les auteurs

Intranet d'établissement avec Eva-web Document pour les auteurs Intranet d'établissement avec Eva-web Document pour les auteurs Trois types d'utilisateurs d'eva Les administrateurs d'eva - Ils peuvent paramétrer le site, effectuer des sauvegardes, des restaurations,

Plus en détail

Présentation du Framework BootstrapTwitter

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...

Plus en détail

TOUT SUR LES FENETRES

TOUT SUR LES FENETRES TOUT SUR LES FENETRES Windows, dont le nom veut dire «fenêtres» en français, est fait pour gérer plusieurs programmes à la fois. Alors ne vous en privez pas, vous pouvez ouvrir plusieurs programmes en

Plus en détail

Construire un blog. Plate-formes gratuites. http://www.canalblog.com/ Créer un blog avec canalblog.

Construire un blog. Plate-formes gratuites. http://www.canalblog.com/ Créer un blog avec canalblog. Construire un blog Carmen Vera PérezP Plate-formes gratuites. http://www.canalblog.com/ http://www.blogger.com/start http://www.wordpress.fr/ http://www.over-blog.com/ http://www.canalblog.com/ la possibilité

Plus en détail

Démonstration de la copie des données dans un site Web

Démonstration de la copie des données dans un site Web Démonstration de la copie des données dans un site Web Ce document illustre le mode d emploi de la copie successive de l identifiant PUIS du mot de passe à l aide des boutons «Copier les deux» et «Copie

Plus en détail

MEMENTO. Interface d administration du site www.ville-joigny.fr. I. Identification :... 2. II. Présentation de l interface :... 3

MEMENTO. Interface d administration du site www.ville-joigny.fr. I. Identification :... 2. II. Présentation de l interface :... 3 MEMENTO Interface d administration du site www.ville-joigny.fr I. Identification :... 2 II. Présentation de l interface :... 3 III. Modification des pages du site :... 5 A. Chaque paragraphe comporte un

Plus en détail

N 1 AIDE isolution V I I I. I m p r e s s i o n, F u s i o n, P u b l i p o s t a g e Aide isolution Page 1 sur 13 le 22 juillet 2009

N 1 AIDE isolution V I I I. I m p r e s s i o n, F u s i o n, P u b l i p o s t a g e Aide isolution Page 1 sur 13 le 22 juillet 2009 N 1 AIDE isolution V I I I. I m p r e s s i o n, F u s i o n, P u b l i p o s t a g e Aide isolution Page 1 sur 13 le 22 juillet 2009 VIII. Impression, Fusion et Publipostage VIII.1. Le Gestionnaire de

Plus en détail

Créer sa première base de données Access Partie 3/4 - Création d un formulaire

Créer sa première base de données Access Partie 3/4 - Création d un formulaire - le 12/02/2013 Créer sa première base de données Access Partie 3/4 - Création d un formulaire Ce tutoriel est la suite de l article sur la création d une table et l article sur la création d une requête.

Plus en détail

Programme d Accès Communautaire / Atelier 6 Microsoft PowerPoint PLAN DE COURS 4. DÉMARRAGE DE POWERPOINT 5 Exercice : Étape 1 5

Programme d Accès Communautaire / Atelier 6 Microsoft PowerPoint PLAN DE COURS 4. DÉMARRAGE DE POWERPOINT 5 Exercice : Étape 1 5 TABLE DES MATIÈRES PLAN DE COURS 4 DÉMARRAGE DE POWERPOINT 5 Exercice : Étape 1 5 INSÉRER UNE ZONE DE TEXTE 5 Exercice : Étape 2 6 MODIFIER LA POLICE D'ÉCRITURE DANS UNE ZONE DE TEXTE 6 Exercice : Étape

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Manuel Utilisateur Messagerie

Manuel Utilisateur Messagerie Manuel Utilisateur Messagerie Auteur : Logica Version : 1.3 Droit d auteur Ce texte est disponible sous contrat Creative Commons Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales

Plus en détail

Créer un sondage en ligne

Créer un sondage en ligne Créer un sondage en ligne Par Clément JOATHON Dernière mise à jour : 02/04/2015 Que cela soit pour récolter l'avis des membres d'une association ou encore les idées de vos visiteurs, il est toujours intéressant

Plus en détail

Guide de mise en page

Guide de mise en page Guide de mise en page L outil Librinova convertit votre manuscrit en livre numérique, c est à dire dans les formats suivants : epub, PDF et Mobipocket. L epub est le format standard du livre numérique.

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Tableur OpenOffice : Les Outils

Tableur OpenOffice : Les Outils 1. Environnement de travail Bouton système Nom du document Nom du logiciel Barre de menus Cases système du logiciel Cases système du fichier Zone de nom : elle contient l adresse du champ sélectionné Cellule

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

Séances 4a/4b Technologies du Web

Séances 4a/4b Technologies du Web Formations en Informatique de Lille 2012/2013 Séances 4a/4b Technologies du Web février 2013 Javascript Exercice 1 : Préalable : mise en place des outils Pour ce premier exercice, nous allons utiliser

Plus en détail

Dossier gestion du site web cneaf.fr

Dossier gestion du site web cneaf.fr ÉDITION DE CONTENUS Les pages, événements et articles utilisent l'outil de mise en forme «Avia» : 1 Outil de création de mise en forme Avia Celui ci permet d'agencer les contenus des pages à partir de

Plus en détail

Genymotion : l'émulateur Android le plus rapide au Monde!

Genymotion : l'émulateur Android le plus rapide au Monde! Genymotion : l'émulateur Android le plus rapide au Monde! Voulez-vous développer vos propres applications Android mais l'émulateur est trop lent? Utilisez-vous Android Studio ou Eclipse et vous voulez

Plus en détail

Créer des étiquettes avec les adresses d'un tableau Calc

Créer des étiquettes avec les adresses d'un tableau Calc Créer des étiquettes avec les adresses d'un tableau Calc Il faudra au préalable avoir déjà créé le tableau contenant les adresses avec Calc. Il y a trois étapes différentes pour réaliser des étiquettes

Plus en détail

Manuel Utilisateur Actualités

Manuel Utilisateur Actualités Manuel Utilisateur Actualités Auteur : Logica Version : 1.14 Droit d auteur Ce texte est disponible sous contrat Creative Commons Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales

Plus en détail

Utiliser le logiciel CALIBRE pour gérer vos documents et les convertir au format epub

Utiliser le logiciel CALIBRE pour gérer vos documents et les convertir au format epub Ce travail est traduit et adapté de l'aide de Emma Davies de L'University of Leicester par le CDDP de la Corrèze Utiliser le logiciel CALIBRE pour gérer vos documents et les convertir au format epub Synopsis

Plus en détail

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Vous allez créer avec cette leçon un album de photo avec le logiciel «Albelli livre photo». 2 La préparation Le travail le plus important pour

Plus en détail

Devoir XML / XSLT / Unicode

Devoir XML / XSLT / Unicode Devoir XML / XSLT / Unicode Frédérik Bilhaut Université de Caen Département d'informatique Les fichiers fournis pour réaliser le devoir sont à récupérer ici : http://www.info.unicaen.fr/~fbilhaut/ens/radi/devoir.tgz

Plus en détail

Feuille de style sous open office.

Feuille de style sous open office. Feuille de style sous open office. Une feuille de style permet de mettre en page un cours, un exposé ou un rapport en lui gardant la même présentation du début à la fin. Elle se programme avant de taper

Plus en détail

Mode d emploi sites associés

Mode d emploi sites associés Mode d emploi sites associés Prise en main Adresse de connexion : www.diocese-annecy.fr/ suivi de votre appellation propre. Ex : www.dioceseannecy.fr/st-françois-de-sales pour la paroisse St François de

Plus en détail

Utilisation de Sarbacane 3 Sarbacane Software

Utilisation de Sarbacane 3 Sarbacane Software Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur

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

Initiation à Powerpoint

Initiation à Powerpoint Initiation à Powerpoint Powerpoint est un logiciel de PréAO, c est à dire de Présentation Assistée par Ordinateur. Il vous permet de créer et de mettre en page des présentations susceptibles d être projetées

Plus en détail

GESTION DE SITE Table des matières

GESTION DE SITE Table des matières GESTION DE SITE Table des matières 1- Page d accueil de l interface de gestion de site...1 2- Table Menu...4 3- Éditeur de texte...5 4- Insérer une image dans une page...6 5- Créer un lien hypertexte vers

Plus en détail

Création de pages web

Création de pages web Création de pages web I. Démarrage du logiciel 2 1. La Barre d'état....2 2. La palette objets.... 2 3. Les autres palettes et inspecteurs.... 2 4. La fenêtre de site...3 II. Créer des pages avec DreamWeaver

Plus en détail

Par Clément JOATHON Dernière mise à jour : 10/03/2016

Par Clément JOATHON Dernière mise à jour : 10/03/2016 Cré ér un postér Créer un poster Par Clément JOATHON Dernière mise à jour : 10/03/2016 Vous disposez d'une grande image ou d'un gros document à partir duquel vous souhaitez réaliser un poster. Hélas, vous

Plus en détail

PUBLIPOSTAGE AVEC OPENOFFICE

PUBLIPOSTAGE AVEC OPENOFFICE PUBLIPOSTAGE AVEC OPENOFFICE 1 - Introduction 2 - Création d'une source de données 3 - Création d'un courrier type 4 - Insertion des champs dans la lettre type 5 - Impression des documents 6 - Publipostage

Plus en détail

EDITEUR DE PAGE HTML NETSCAPE COMPOSER

EDITEUR DE PAGE HTML NETSCAPE COMPOSER EDITEUR DE PAGE HTML NETSCAPE COMPOSER Utilisation Netscape Composer est un éditeur de pages HTML : il vous permet de modifier et créer des pages au format HTML pour les diffuser sur le Web. Il est intégré

Plus en détail

SOLUTIONS & SERVICES OPEN SOURCE. Messagerie Zimbra. Prise en main

SOLUTIONS & SERVICES OPEN SOURCE. Messagerie Zimbra. Prise en main SOLUTIONS & SERVICES OPEN SOURCE Messagerie Zimbra Prise en main 23 juin 2010 Sommaire 1. CONNEXION A LA MESSAGERIE ZIMBRA... 4 1.1. Ecran de connexion à la messagerie... 4 2. PRESENTATION GENERALE DE

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I ) Introduction: 1 Présentation : Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs,

Plus en détail

Freeway 7. Nouvelles fonctionnalités

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

Plus en détail

1. Démarrage... 3. 1.1 Créer un nouveau terrain... 4. 1.2 Placer les éléments fixe... 7. 1.3 Les zones de texte... 8. 2.1 Les obstacles...

1. Démarrage... 3. 1.1 Créer un nouveau terrain... 4. 1.2 Placer les éléments fixe... 7. 1.3 Les zones de texte... 8. 2.1 Les obstacles... Manuel d utilisation Sommaire/ 1. Installation Page 2 1. Démarrage... 3 1.1 Créer un nouveau terrain... 4 1.2 Placer les éléments fixe... 7 1.3 Les zones de texte... 8 2. Tracer son parcours Page 9 2.1

Plus en détail

Guide 2015 site web classique L édition de site

Guide 2015 site web classique L édition de site Guide 2015 site web classique L édition de site L interface d édition Navigation... 03 Langue... 04 Thèmes... 05 Options... 06 Aperçu... 07 Paramètres de page... 08 Partage sur les médias sociaux... 09

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

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

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

Tutoriel JA Promo Bar

Tutoriel JA Promo Bar Tutoriel JA Promo Bar En ce début d'année Joomlart publie trois extensions Joomla gratuites qui nous en sommes sûr vous seront très utiles pour vos sites Web. Elles sont toutes responsive, et fonctionnent

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

Niveau : Découverte Pré-requis : Connaître les fonctionnalités de base de Word2007

Niveau : Découverte Pré-requis : Connaître les fonctionnalités de base de Word2007 EXCEL 2007 Niveau : Découverte Pré-requis : Connaître les fonctionnalités de base de Word2007 Table des matières L ENVIRONNEMENT DU LOGICIEL... 3 1. La fenêtre EXCEL 2007... 4 A. Ce qui ne change pas par

Plus en détail