Dreamweaver. b.t.s. année. communication visuelle / options mma

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Dreamweaver. b.t.s. année. communication visuelle / options mma"

Transcription

1 b.t.s. communication visuelle / options mma Dreamweaver Mise en page CSS [partie 3 : les BALISES DIV] 1 t e c h n o multimédia année HiÉrarchisation des contenus Cette partie utilise les inserts directs de balises div. L approche est moins intuitive qu avec l utilisation des calques [partie 2] mais permet d éditer directement la feuille de style dans un fichier externe. Mise en forme d une page type structurée comme un site portail. 1

2 insertion de balises div L organisation visuelle des balises div est moins visuelle que celle des calques. Aussi il est plus facile de travailler, dans un premier temps, avec des tranches d images et d ensuite les remplacer par de texte et des images d arrière-plan. Créer et enregistrer une page html dans le dossier du site transsiberien. Dans la barre de titre inscrire Passion Transsib-Trek. Cliquer sur Nouveau style CSS Créer une nouvelle feuille de styles styles3.css Ainsi la composition sera centrée horizontalement. Le Type = absolu positionne par rapport à l origine du document. La maquette mesure 1000 x 634 pixels [la hauteur n aura ultérieurement pas d importance mais pour l instant il est plus simple de l indiquer] Dans la catégorie Boîte : marge gauche = -500 pixels [1000/2!] Valider [2 fois]. La fenêtre de style CSS affiche le nouveau style : #principal Le conteneur principal va accueillir d autres blocs. Retirer le texte Placez ici le contenu... Utiliser la fonctionnalité de Dreamweaver 8 : l Arrière-plans en feuille CSS 2

3 Cliquer sur le bouton de la barre d insertion Il s agit de placer le conteneur header à l intérieur du conteneur principal pour établir une liaison de parenté : header sera enfant de principal. Cliquer sur Nouveau style CSS Dans la catégorie Boîte : 1000 x 249 pixels taille du bandeau Pour le bloc-enfant 2 : milieu Supprimer le texte Placez ici... Choisir Insérer : Après la balise <div id="header"> ID = milieu style : #milieu Boîte : 1000 x 363 pixels Placer 3 blocs dans le conteneur milieu Les 3 blocs doivent se placer sur la même ligne. Il est nécessaire d ajouter une propriété de flottement. Supprimer le texte Placez ici... Choisir Insérer : Après le début de la balise <div id="milieu"> ID = milieugauche style : #milieugauche Boîte : 260 x 363 pixels / Flottante : gauche Choisir Insérer : Après la balise <div id="milieugauche"> ID = milieucentre style : #milieucentre Boîte : 480 x 363 pixels / Flottante : gauche Choisir Insérer : Après la balise <div id="milieucentre"> ID = milieudroite style : #milieudroite Boîte : 260 x 363 pixels / Flottante : gauche Pour finir Choisir Insérer : avant la fin de la balise <div id="principal"> ID = pied style : #pied Boîte : 1000 x 21 pixels / Flottante : gauche La structure est conforme pour accueillir le contenu 3

4 intégration des contenus Un bug ergonomique dans Dreamweaver 8 empêche de glisser le contenu dans les blocs une fois le texte Placer ici le contenu... supprimer. Passer en mode Code En utilisant le glisser/déposer insérer les images de la manière suivante : Repasser en mode Création Afin d ajouter les informations sur la taille des images, sélectionner chacune d elles et cliquer sur le bouton : et supprimer éventuellement le texte excédant. Enregistrez Pour rendre les images conformes aux normes il faut leur associer un texte descriptif. Cliquer sur l image dans le header, dans la palette Propriétés. Dans le champ Sec., incrire logo espace-transsiberien.com. Pour la photographie de gauche : forêt de l Oural Pour celle de droite : plaine de Mongolie - yourte Reste à substituer les images par de vrais textes. Ouvrir le fichier transsib-trek.rtf Remplacer chaque image par son texte respectif Attribuer la balise en-tête 1 au titres : Détails du séjour, Ce qui fait notre différence Attribuer la balise en-tête 2 au titre-secondaire : Moscou - Irkoutsk - Lac Baïkal - Oulan Bator - Pékin Attribuer la balise en-tête 3 au titre : Passion Transsib-Trek, Si nécessaire supprimer les sauts de lignes inutiles et créer les paragraphes nécessaires. Désactiver l option : Arrière-plans en feuille CSS 4

5 les styles css et les balises div Créer le style de balise h1 : Type, Police = Arial... ; Taille = 14 pixels ; Épaisseur = gras ; Couleur = #fff Arrière-plan, Couleur d arrière-plan = #cc0000 Bloc, Retrait du texte = 10 px Boîte, Largeur = auto ; Hauteur = 25 px ; Remplissage = 10 px, 0, 0, 0 Marge = 0, 0, -19 px, 0 Positionnement, Type = relatif Créer le style de balise h2 : Type, Police = Arial... ; Taille = 12 px ; Épaisseur = 700 ; Couleur = #cc0000 Boîte, Remplissage = 2 px, 2 px, 2 px, 10 px Créer le style de balise h3 : Type, Police = Arial... ; Taille = 14 px ; Épaisseur = gras ; Couleur = #000 Arrière-plan, Couleur d arrière-plan = # Bloc, Retrait du texte = 10 px Boîte, Largeur = auto ; Hauteur = 25 px ; Remplissage = 10 px, 0, 0, 0 Marge = 0, 0, -19 px, 0 Positionnement, Type = relatif Définir le style avancé pour les images : Img#photo Boîte, Remplissage = 0 px, 0 px, 0 px, 0 px ; Marge = 0 px, 0 px, 10 px, 0 px Appliquer ce style aux 2 images : trans_trek_05.jpg et trans_trek_07.jpg Définir le style pour le bloc principal : Arrière-plan, Image d arrière-plan = fond-transtrek.jpg ; Répétition = répétition y Définir le style pour le bloc milieu : Type, Police = Courier... ; Taille = 12 pixels ; Couleur = #333 Arrière-plan, Image d arrière-plan = fond-milieu.jpg ; Répétition = pas de répétition Boîte, Largeur = 1000 px ; Hauteur = 350 px Définir le style pour le bloc milieudroite : Type, Police = Arial... ; Taille = 9 pixels ; Couleur = #333 Créer une classe.marge pour le texte Boîte, Marge = - 10 px, 10 px, 10 px 10 px Appliquer aux différents paragraphes Définir le bloc pied Type, Police = Arial... ; Taille = 10 pixels ; Épaisseur = 700 ; Couleur = #666 Arrière-plan, Couleur d arrière-plan = # Bloc, Alignement du texte = Centrer Boîte, Largeur = 1000 px ; Hauteur = 25 px ; Remplissage = 0, 0, 0, 0 ; Marge = -10 px, 0, 0, 0 Supprimer les indications de hauteur pour #principal, #milieugauche, #milieudroit, #milieucentre, remplacer par auto Terminer en configurant les liens #milieugauche a:link = arial, 12px, gras, #cc0000 #milieugauche a:visited = arial, 12px, gras, #cc0000 #milieugauche a:active = arial, 12px, gras, #cc0000 #milieugauche a:hover = arial, 12px, gras, # #pied a:link = arial, 10px, #000 #pied a:visited = arial, 10px, #000 #pied a:active = arial, 10px, #000 #pied a:hover = arial, 10px, #fff 5

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

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

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

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

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

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

Plus en détail

Des pages web avec KompoZer

Des pages web avec KompoZer Des pages web avec KompoZer S Patrice NADAM, Lycée La Tour de Dames Rozay-en Brie (77) et Médialog KompoZer est un nouvel éditeur HTML libre et gratuit. Nous vous proposons d aller pas à pas à sa découverte.

Plus en détail

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

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

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

Introduction à Expression Web 2

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

Plus en détail

Comment insérer une image de fond?

Comment insérer une image de fond? COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

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

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

Plus en détail

Application du guide méthodologique 2010 avec Word : Mac 2008

Application du guide méthodologique 2010 avec Word : Mac 2008 Fanny Gravel Marie-Josée Tondreau Septembre 2010 Table des matières Comment lire ce guide... 3 A. Sélectionner le papier.... 3 B. Modifier les marges.... 5 C. Sélectionner la police et la taille des caractères....

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

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

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée

Plus en détail

CRÉATION D UNE PAGE WEB GUIDE DE L ÉLÈVE

CRÉATION D UNE PAGE WEB GUIDE DE L ÉLÈVE CRÉATION D UNE PAGE WEB GUIDE DE L ÉLÈVE Ce projet est divisé en 3 parties. Dans cette première partie, tu apprendras comment te servir du logiciel Microsoft Office SharePoint Designer 2007 Étape 1 : Dans

Plus en détail

Application du guide méthodologique 2010 avec Microsoft Word 2010

Application du guide méthodologique 2010 avec Microsoft Word 2010 Fanny Gravel Marie-Josée Tondreau Septembre 2010 Table des matières Comment lire ce guide... 3 A. Sélectionner le papier.... 3 B. Modifier les marges.... 5 C. Sélectionner la police et la taille des caractères....

Plus en détail

Styler un document sous OpenOffice 4.0

Styler un document sous OpenOffice 4.0 Mars 2014 Styler un document sous OpenOffice 4.0 Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Tutoriel d utilisation

Tutoriel d utilisation Tutoriel d utilisation JCE est l éditeur le plus complet pour Joomla! JCE est capable de gérer les mise en page comme un éditeur de type Word ou Open Office. Il permet d insérer des images et médias de

Plus en détail

Formation tableur niveau 1 (Excel 2013)

Formation tableur niveau 1 (Excel 2013) Formation tableur niveau 1 (Excel 2013) L objectif général de cette formation est de repérer les différents éléments de la fenêtre Excel, de réaliser et de mettre en forme un tableau simple en utilisant

Plus en détail

Chapitre 4 Les tableaux

Chapitre 4 Les tableaux Chapitre 4 Les tableaux A. Introduction AutoCAD 2010 permet la création automatisée d objets tableaux. Ceci vous évite de concevoir des tableaux à partir de lignes individuelles, textes, et blocs. Après

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

Leçon 1 Traitement de texte

Leçon 1 Traitement de texte Leçon Traitement de texte Objectifs Connaître les fonctions de base d un logiciel de traitement de texte ; Créer, enregistrer et charger un document texte ; Sélectionner, copier et déplacer un bloc de

Plus en détail

Cours 1 PRÉSENTATION DU LOGICIEL LES MANIÈRES D UTILISER FRAMEMAKER LES DIFFÉRENTS FORMATS D ENREGISTREMENT SAUVEGARDE ET ENREGISTREMENT AUTOMATIQUE

Cours 1 PRÉSENTATION DU LOGICIEL LES MANIÈRES D UTILISER FRAMEMAKER LES DIFFÉRENTS FORMATS D ENREGISTREMENT SAUVEGARDE ET ENREGISTREMENT AUTOMATIQUE FrameMaker Cours 1 Synthèse 1 Cours 1 PRÉSENTATION DU LOGICIEL FrameMaker est un logiciel d'adobe orienté vers la documentation technique, la réglementation administrative et la réalisation d'ouvrages

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

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

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

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

LE PUBLIPOSTAGE : PAS A PAS

LE PUBLIPOSTAGE : PAS A PAS INITIATION A UN LOGICIEL DE TRAITEMENT DE TEXTE LE PUBLIPOSTAGE : PAS A PAS I L ENVOI DE LETTRES AVEC UNE NOUVELLE LISTE Le publipostage consiste à envoyer massivement un document, que ce soit par mail

Plus en détail

Application du guide méthodologique 2012 avec OpenOffice Writer

Application du guide méthodologique 2012 avec OpenOffice Writer Fanny Gravel Marie-Josée Tondreau Mai 2013 Table des matières Comment lire ce guide... 3 A. Sélectionner le papier.... 3 B. Modifier les marges.... 5 C. Sélectionner la police et la taille des caractères....

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

Interface Interface de travail Configuration/Déclaration du site. Le texte Insertion et mise en page Hyperliens, ancres, liens e-mails

Interface Interface de travail Configuration/Déclaration du site. Le texte Insertion et mise en page Hyperliens, ancres, liens e-mails Formatrice créer son site Internet Notions de base XHTML, CSS, hyperlien, e-mail Les éléments : texte, images, animations, vidéo, son La navigation et l arborescence Répertoires, fichiers : les nommer?

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

Formation : Le préscolaire et l exploitation des TIC Créer sa devinette en quelques clics

Formation : Le préscolaire et l exploitation des TIC Créer sa devinette en quelques clics Formation : Le préscolaire et l exploitation des TIC Créer sa devinette en quelques clics Quelques notions de base pour la création d une présentation Logiciel utilisé : PowerPoint 2004 Ordinateur MAC

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

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

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

Dreamweaver : les fonctions essentielles

Dreamweaver : les fonctions essentielles Dw ADOBE DREAMWEAVER CS3 De GoLive à Dreamweaver Dreamweaver : les fonctions essentielles Formateur : Éric Morasse Conseiller en formation et en multimédia Hydro-Québec Distribution Dw ADOBE DREAMWEAVER

Plus en détail

Le site Internet de FilCall.com

Le site Internet de FilCall.com Le site Internet de FilCall.com Visuel de la page d'accueil du site FilCall.com (Février 2008) Introduction Le développement du site FilCall.com (filiale de la société VitavieTravel.com) a été conçu à

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

Plan de la formation (1)

Plan de la formation (1) Plan de la formation (1) 1. Présentations, attentes et besoins 2. Contexte de la formation 3. Objectifs 4. Quelques rappels (commandes de base) 5. Démonstrations et expérimentation de commandes avancées

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

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

Guichet-étudiant/Info campus INTRODUCTION AU LOGICIEL WORD 2010

Guichet-étudiant/Info campus INTRODUCTION AU LOGICIEL WORD 2010 Guichet-étudiant/Info campus INTRODUCTION AU LOGICIEL WORD 2010 Conçu par : Olivier Gingras, animateur d activités étudiantes Juillet 2014 TABLE DES MATIÈRES 1. ONGLET FICHIER... 3 1.1. Localisation de

Plus en détail

PROCÉDURES D ÉDITION. Guide de l usager TYPO3

PROCÉDURES D ÉDITION. Guide de l usager TYPO3 Guide de l usager TYPO3 Sommaire Connexion à TYPO 3...5 Gestion des pages dans TYPO 3...6 Ajouter une nouvelle page...7 Déplacer ou copier une page de l arborescence... 11 Supprimer une page... 12 Ouvrir

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

Excel XP formation niveau 1

Excel XP formation niveau 1 Excel XP formation niveau 1 L objectif général de cette formation est de repérer les différents éléments de la fenêtre Excel, de réaliser et de mettre en forme un tableau simple en utilisant quelques formules

Plus en détail

Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.

Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement. Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer

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

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

NOTE TECHNIQUE. Refonte de la page de choix Personnalisation VERSION DU 01/03/2015

NOTE TECHNIQUE. Refonte de la page de choix Personnalisation VERSION DU 01/03/2015 Solution E-transactions Date: 12/02/2015 E-transactions NOTE TECHNIQUE Refonte de la page de choix Personnalisation VERSION DU 01/03/2015 Version du 12/12/2015 1 Crédit Agricole S.A, société anonyme au

Plus en détail

Formation tableur niveau 1 (LibreOffice Calc 4)

Formation tableur niveau 1 (LibreOffice Calc 4) Formation tableur niveau 1 (LibreOffice Calc 4) L objectif général de cette formation est de repérer les différents éléments de la fenêtre LibreOffice Calc, de réaliser et de mettre en forme un tableau

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

openpersonnalite Documentation

openpersonnalite Documentation openpersonnalite Documentation Release 1.00 openmairie January 26, 2012 CONTENTS 1 utilisation 3 1.1 Principes................................................. 3 1.2 saisir une personne............................................

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

Le traitement de texte de la suite Open Office

Le traitement de texte de la suite Open Office Le traitement de texte de la suite Open Office Fichier utilisé : poesie.doc Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO)

Plus en détail

Adobe Programme Expert certifié

Adobe Programme Expert certifié Adobe Programme Expert certifié Bulletin d'examen de maîtrise des produits Adobe Dreamweaver CS3 Examen n 9A0-056 Liste de contrôle de certification ACE La liste de contrôle ci-dessous vous guidera tout

Plus en détail

Pour accéder à Cursus (à partir de la page d accueil de l Université Rennes 2) :

Pour accéder à Cursus (à partir de la page d accueil de l Université Rennes 2) : Pour accéder à Cursus (à partir de la page d accueil de l Université Rennes 2) : Cliquez sur le pavé «Cursus» situé en bas à droite du bandeau bleu. Cliquez sur le bouton «Connexion» en haut à droite de

Plus en détail

Word 2002 Initiation. Guide de formation avec exercices et cas pratiques. Patrick Morié. Tsoft et Groupe Eyrolles, 2003 ISBN : 2-212-11235-1

Word 2002 Initiation. Guide de formation avec exercices et cas pratiques. Patrick Morié. Tsoft et Groupe Eyrolles, 2003 ISBN : 2-212-11235-1 Word 2002 Initiation Guide de formation avec exercices et cas pratiques Patrick Morié Tsoft et Groupe Eyrolles, 2003 ISBN : 2-212-11235-1 CAS 1 : COURRIER CAP International - S.A. au capital de 900.000

Plus en détail

Créer son mini-site sur la plateforme Mécatronique LR

Créer son mini-site sur la plateforme Mécatronique LR Créer son mini-site sur la plateforme Mécatronique LR 1 Sommaire Accéder à l interphase de création.....3 Préambule d ergonomie...4 Ajouter votre logo.....5 Transférer des fichiers sur le serveur.6 Remplir

Plus en détail

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Page 1 /8 Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Section 1 Utilisation de l ordinateur Identification de l utilisateur o Ctrl+alt+suppr

Plus en détail

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM V1.0 TUTORIEL JCE - EDITEUR Le nouvel outil pour vos articles... Pour les plus anciens d entre vous, vous avez connu la transmission des

Plus en détail

XPress. en production. Apprenez à réaliser une carte de visite une plaquette une affiche un livre. Mathieu Lavant

XPress. en production. Apprenez à réaliser une carte de visite une plaquette une affiche un livre. Mathieu Lavant Mathieu Lavant XPress en production Apprenez à réaliser une carte de visite une plaquette une affiche un livre Groupe Eyrolles, 2007, ISBN : 978-2-212-12111-7 Réaliser une plaquette commerciale Atelier

Plus en détail

GUIDE Word (version intermédiaire) Version 2013

GUIDE Word (version intermédiaire) Version 2013 GUIDE Word (version intermédiaire) Version 2013 Table des matières 1. Les rubans... 2 2. Pagination... 4 3. En-tête et pied de page... 4 4. Note de bas de page ou des notes de fin de document... 6 5. Table

Plus en détail

Worldsoft-CMS Module Membres. Module Membres. Paramètres. Créer la navigation. Gérer le profile

Worldsoft-CMS Module Membres. Module Membres. Paramètres. Créer la navigation. Gérer le profile 1 Ce nouveau module du Worldsoft CMS permet de créer des profiles, des contacts et des messages et aussi de les gérer. Cet aide-mémoire montre la mise en place du module. Paramètres Connectez-vous à l

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création

Plus en détail

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

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

Styler un document sous Word 2010*

Styler un document sous Word 2010* Février 2014 Styler un document sous Word 2010* Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière

Plus en détail

Joomla 3.1.1 1 Weber Yvan 11.08.13

Joomla 3.1.1 1 Weber Yvan 11.08.13 1 2 Table des matières 1 Introduction...3 2 Supprimer le bandeau...6 3 Insérer le nouveau bandeau...12 4 Déplacer le bandeau contre le haut...15 3 1 Introduction 1 Dans ce tutoriel, a été installé sans

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

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

Plus en détail

Créer des tableaux. Définir un style de tableau PRATIQUE. AutoCAD 2005

Créer des tableaux. Définir un style de tableau PRATIQUE. AutoCAD 2005 AutoCAD 2005 Créer des tableaux Un tableau est un cadre dans lequel des données texte peuvent être disposées en colonnes et en rangées. Ses propriétés, mémorisées dans un style, lui permettent de pouvoir

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Présentation de Muse

Présentation de Muse Présentation de Muse J. ROMAGNY 1. CONSEILS... 4 2. INTERFACE... 5 A. CREATION DE SITE... 5 960 Grid System avec Muse... 6 B. PLAN DU SITE... 7 C. CONCEPTION (EDITION DES «MASTER PAGES» ET PAGES)... 8

Plus en détail

[MARCHE À SUIVRE SITE WEB BCU LAUSANNE ]

[MARCHE À SUIVRE SITE WEB BCU LAUSANNE ] [MARCHE À SUIVRE SITE WEB BCU LAUSANNE ] Marche à suivre pour la mise à jour du site web de la Bibliothèque Cantonale Universitaire de Lausanne au travers du système de gestion de contenu Wordpress 3.5

Plus en détail

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

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

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage rapide. Rédiger une page ou un article,»...3 Ajouter

Plus en détail

Les différents types de relation entre les tables

Les différents types de relation entre les tables TABLES Les différents types de relation entre les tables La mise en relation de tables permet de relier les données d une table à celles d une autre table et ainsi d établir une base de données de type

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

Gérer des sites avec Dreamweaver

Gérer des sites avec Dreamweaver Gérer des sites avec Dreamweaver La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter

Plus en détail

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887)

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887) Introduction Qu est-ce que la certification Microsoft Office Specialist? 11 Quels sont les intérêts de la certification? 11 Comment se passe un examen? 12 Comment réussir à l examen? 12 Et après? 12 Et

Plus en détail

1 è r e étape : créer sa base de d o n n é e s

1 è r e étape : créer sa base de d o n n é e s Le publipostage (ou mailing) permet à un document (le document principal créé avec Open Office Writer) de profiter des informations se trouvant dans un autre document (la source de données créée avec Open

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

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

Plus en détail

C2I CREATION DE PAGES WEB KOMPOZER

C2I CREATION DE PAGES WEB KOMPOZER C2I CREATION DE PAGES WEB KOMPOZER Philippe Rincon - kompozer prise en main - Le travail de la séance d'aujourd'hui consiste à reproduire un site existant, déjà en ligne. Au terme de la séance vous devrez

Plus en détail

Publier un Carnet Blanc

Publier un Carnet Blanc Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,

Plus en détail