SlideShare une entreprise Scribd logo

Prise en main de Dreamweaver

objectif général : Prendre en main DreamWeaver objectifs opérationnels : - Paramétrer un site local - Publier du texte - Lister du contenu - Lier des contenus - Afficher une image - Établir un tableau - Présenter un formulaire - Positionner et régler l’affichage d’un contenu - Intégrer du son et de la vidéo

1  sur  54
Initiation à
Dreamweaver CS3
M. DIENG Abdoulaye
Objectif général
Prendre en main DreamWeaver
2
Les objectifs opérationnels
 Paramétrer un site local
 Publier du texte
 Lister du contenu
 Lier des contenus
 Afficher une image
 Établir un tableau
 Présenter un formulaire
 Positionner et régler l’affichage d’un contenu
 Intégrer du son et de la vidéo
3
Le sommaire
1. Présentation de DW
2. L’interface de DW
3. Paramétrer un site local
4. Création d’une page
5. Le texte
6. Les listes
7. Les liens
8. Les propriétés d’une page
9. Les images
10. Les tableaux
11. Les formulaires
12. Les calques
13. Le son et la vidéo
Présentation de DreamWeaver
• Adobe Dreamweaver (anciennement Macromedia
Dreamweaver et racheté en décembre 2005) est un éditeur
de site web de type WYSIWYG (tel affichage, tel résultat).
• Dreamweaver offre deux modes de conception:
– « mode création » permettant d'effectuer la mise en page
directement à l'aide d'outils simples, comparables à un logiciel
de traitement de texte.
– « mode code » permettant d'afficher et de modifier
directement le code (HTML ou autre) qui compose la page.
• Dreamweaver offre la possibilité de :
– concevoir des feuilles de style;
– développer des applications dynamiques ;
– gérer un site.
• L’objectif de ce cours est la découverte de Dreamweaver
CS3 afin de construire un site Web.
Interface de Dreamweaver

Recommandé

Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Création de Services et Configuration du ESB avec TalendESB
Création de Services et Configuration du ESB avec TalendESBCréation de Services et Configuration du ESB avec TalendESB
Création de Services et Configuration du ESB avec TalendESBLilia Sfaxi
 

Contenu connexe

Tendances

Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partiekadzaki
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web servicesLilia Sfaxi
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EEInes Ouaz
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdf
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdfPASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdf
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdfTrisTris12
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyENSET, Université Hassan II Casablanca
 

Tendances (20)

Le langage html
Le langage htmlLe langage html
Le langage html
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
HTML
HTMLHTML
HTML
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Tp1 wp etud
Tp1 wp etudTp1 wp etud
Tp1 wp etud
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
TP 1 ACCESS
TP 1 ACCESSTP 1 ACCESS
TP 1 ACCESS
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdf
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdfPASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdf
PASSAGE DE L’ANALOGIE AU NUMERIQUE, IMPACT SUR LE PROCESSUS DE MONTAGE.pdf
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 

En vedette

French homework from gracie reid swp
French homework from gracie reid swpFrench homework from gracie reid swp
French homework from gracie reid swpMorenetamiltonkeynes
 
Vétérinaire élevage bovins allaitants 0910
Vétérinaire élevage bovins allaitants 0910Vétérinaire élevage bovins allaitants 0910
Vétérinaire élevage bovins allaitants 0910rabahrabah
 
2013 03-21~1202@emotion spa-newsletter
2013 03-21~1202@emotion spa-newsletter2013 03-21~1202@emotion spa-newsletter
2013 03-21~1202@emotion spa-newsletterFlemann
 
Prix asf-1997-titrisation-et-defaisance
Prix asf-1997-titrisation-et-defaisancePrix asf-1997-titrisation-et-defaisance
Prix asf-1997-titrisation-et-defaisancelindatraves
 
Cours domicile qr_code
Cours domicile qr_codeCours domicile qr_code
Cours domicile qr_codeLaurent Cheret
 
Mba MCI _ Presentation_Kazachoc_2011
Mba MCI _ Presentation_Kazachoc_2011Mba MCI _ Presentation_Kazachoc_2011
Mba MCI _ Presentation_Kazachoc_2011Clémence Coppey
 
Heuvelman presentatie
Heuvelman presentatieHeuvelman presentatie
Heuvelman presentatieCPHam
 
El muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actualesEl muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actualesSebastián Lora Sánchez
 
Aujourd hui nous fetons robes de mariée dentelle
Aujourd hui nous fetons robes de mariée dentelleAujourd hui nous fetons robes de mariée dentelle
Aujourd hui nous fetons robes de mariée dentellepersonalcare
 
Generación 2009 2012
Generación 2009 2012Generación 2009 2012
Generación 2009 2012tareadeartes
 
Les dessous de l'e-mail marketing par DOLIST
Les dessous de l'e-mail marketing par DOLISTLes dessous de l'e-mail marketing par DOLIST
Les dessous de l'e-mail marketing par DOLISTIlle & Vilaine Tourisme
 
Examen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza MediaExamen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza MediaBaltasar Pena Abal
 
Tombouctou mali afrique occidentale
Tombouctou mali   afrique occidentaleTombouctou mali   afrique occidentale
Tombouctou mali afrique occidentaleParaschiv Sorin
 
Mi personalidad y yo....
Mi personalidad y yo....Mi personalidad y yo....
Mi personalidad y yo....Cecilia PC
 
Programa de experto en elearning tatiana cobena
Programa de experto en elearning tatiana cobenaPrograma de experto en elearning tatiana cobena
Programa de experto en elearning tatiana cobenatathyeliza
 
Robe de demoiselle d'honneur noviamor
Robe de demoiselle d'honneur noviamorRobe de demoiselle d'honneur noviamor
Robe de demoiselle d'honneur noviamorannerober
 

En vedette (20)

French homework from gracie reid swp
French homework from gracie reid swpFrench homework from gracie reid swp
French homework from gracie reid swp
 
Vétérinaire élevage bovins allaitants 0910
Vétérinaire élevage bovins allaitants 0910Vétérinaire élevage bovins allaitants 0910
Vétérinaire élevage bovins allaitants 0910
 
2013 03-21~1202@emotion spa-newsletter
2013 03-21~1202@emotion spa-newsletter2013 03-21~1202@emotion spa-newsletter
2013 03-21~1202@emotion spa-newsletter
 
Prix asf-1997-titrisation-et-defaisance
Prix asf-1997-titrisation-et-defaisancePrix asf-1997-titrisation-et-defaisance
Prix asf-1997-titrisation-et-defaisance
 
Cours domicile qr_code
Cours domicile qr_codeCours domicile qr_code
Cours domicile qr_code
 
Mba MCI _ Presentation_Kazachoc_2011
Mba MCI _ Presentation_Kazachoc_2011Mba MCI _ Presentation_Kazachoc_2011
Mba MCI _ Presentation_Kazachoc_2011
 
Heuvelman presentatie
Heuvelman presentatieHeuvelman presentatie
Heuvelman presentatie
 
El muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actualesEl muro de Berlín, en el 25 aniversario, los otros muros actuales
El muro de Berlín, en el 25 aniversario, los otros muros actuales
 
Aujourd hui nous fetons robes de mariée dentelle
Aujourd hui nous fetons robes de mariée dentelleAujourd hui nous fetons robes de mariée dentelle
Aujourd hui nous fetons robes de mariée dentelle
 
Medecine Religion
Medecine ReligionMedecine Religion
Medecine Religion
 
Generación 2009 2012
Generación 2009 2012Generación 2009 2012
Generación 2009 2012
 
Projet
ProjetProjet
Projet
 
Les dessous de l'e-mail marketing par DOLIST
Les dessous de l'e-mail marketing par DOLISTLes dessous de l'e-mail marketing par DOLIST
Les dessous de l'e-mail marketing par DOLIST
 
Examen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza MediaExamen oral 4o Bimestre Segundo Enseñanza Media
Examen oral 4o Bimestre Segundo Enseñanza Media
 
Tombouctou mali afrique occidentale
Tombouctou mali   afrique occidentaleTombouctou mali   afrique occidentale
Tombouctou mali afrique occidentale
 
Mi personalidad y yo....
Mi personalidad y yo....Mi personalidad y yo....
Mi personalidad y yo....
 
Programa de experto en elearning tatiana cobena
Programa de experto en elearning tatiana cobenaPrograma de experto en elearning tatiana cobena
Programa de experto en elearning tatiana cobena
 
Ca2 cap01
Ca2 cap01Ca2 cap01
Ca2 cap01
 
R A M A D A N I A T E S 04
R A M A D A N I A T E S 04R A M A D A N I A T E S 04
R A M A D A N I A T E S 04
 
Robe de demoiselle d'honneur noviamor
Robe de demoiselle d'honneur noviamorRobe de demoiselle d'honneur noviamor
Robe de demoiselle d'honneur noviamor
 

Similaire à Prise en main de Dreamweaver

Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vfThabet Chokri
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.pptAmineReal
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidocStéphanie Tricard
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliserWireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utilisernathalieberger
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIPCyberco
 
OOo Writer : présentation
OOo Writer : présentationOOo Writer : présentation
OOo Writer : présentationNicolas Alarcon
 
Cours_Bureautiue_1.pptx
Cours_Bureautiue_1.pptxCours_Bureautiue_1.pptx
Cours_Bureautiue_1.pptxelfatih10
 
Création d’un site web2017
Création d’un site web2017Création d’un site web2017
Création d’un site web2017jihen damerji
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoccdi-0450786k
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocpriscilla_mommessin
 

Similaire à Prise en main de Dreamweaver (20)

Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Apprendre dreamweaver
Apprendre dreamweaverApprendre dreamweaver
Apprendre dreamweaver
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidoc
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliserWireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
 
OOo Writer : présentation
OOo Writer : présentationOOo Writer : présentation
OOo Writer : présentation
 
Cours_Bureautiue_1.pptx
Cours_Bureautiue_1.pptxCours_Bureautiue_1.pptx
Cours_Bureautiue_1.pptx
 
Création d’un site web2017
Création d’un site web2017Création d’un site web2017
Création d’un site web2017
 
Créer son site_jimdo
Créer son site_jimdoCréer son site_jimdo
Créer son site_jimdo
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Html css
Html cssHtml css
Html css
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 

Prise en main de Dreamweaver

  • 2. Objectif général Prendre en main DreamWeaver 2
  • 3. Les objectifs opérationnels  Paramétrer un site local  Publier du texte  Lister du contenu  Lier des contenus  Afficher une image  Établir un tableau  Présenter un formulaire  Positionner et régler l’affichage d’un contenu  Intégrer du son et de la vidéo 3
  • 4. Le sommaire 1. Présentation de DW 2. L’interface de DW 3. Paramétrer un site local 4. Création d’une page 5. Le texte 6. Les listes 7. Les liens 8. Les propriétés d’une page 9. Les images 10. Les tableaux 11. Les formulaires 12. Les calques 13. Le son et la vidéo
  • 5. Présentation de DreamWeaver • Adobe Dreamweaver (anciennement Macromedia Dreamweaver et racheté en décembre 2005) est un éditeur de site web de type WYSIWYG (tel affichage, tel résultat). • Dreamweaver offre deux modes de conception: – « mode création » permettant d'effectuer la mise en page directement à l'aide d'outils simples, comparables à un logiciel de traitement de texte. – « mode code » permettant d'afficher et de modifier directement le code (HTML ou autre) qui compose la page. • Dreamweaver offre la possibilité de : – concevoir des feuilles de style; – développer des applications dynamiques ; – gérer un site. • L’objectif de ce cours est la découverte de Dreamweaver CS3 afin de construire un site Web.
  • 7. Paramétrer un site local (1/3)
  • 8. Paramétrer un site local (2/3)
  • 9. Paramétrer un site local (3/3) 1) Cliquer sur l’onglet « Avancé » 2) Donner un nom au site 3)Mettre le chemin absolue du site 4) Valider avec OK
  • 10. Création d’une page 1) Click droit sur la racine du site 2) Choisir « Nouveau fichier » du menu contextuel 3) Renommer la page 4) Double click sur la page
  • 11. Le texte présentation  Le texte est le moyen le plus courant pour transmettre un message sur une page web.  Un texte peut être composé d'un titre et de plusieurs paragraphes annoncés par des sous-titres.  Sans oublier les degrés d’importance de certains mots, les abréviations, les acronymes et la mise en indice ou en exposant.
  • 12. Le texte insertion Gras et italique Insistances forte et raisonnable paragraphe Citation de paragraphe Texte pré-formaté En-têtes de niveaux 1, 2 et 3 Texte sélectionné abréviation acronyme Autres caractères
  • 13. Les listes présentation • Une liste est une suite de données généralement simples. • Une liste ne doit pas être contenue dans un paragraphe mais peut être annoncée par celui-ci. • Il y’a trois types de listes: – Liste non-ordonnée utilisée lorsqu'il n'y a pas d'ordre prédéfini pour les items. – Liste numérotée utilisée lorsque les items sont ordonnées. – Liste de définition utilisée pour l'affichage de termes accompagnés de leurs définitions respectives.
  • 14. Les listes insertion Liste de définition Terme de définition Description de définition Liste non ordonnée Élément de listeListe ordonnée
  • 15. Les liens présentation  Les liens hypertextes sont l'essence même du World Wide Web, qui n'existerait pas s'il était impossible de naviguer d'un contenu à l'autre.  Cliquer sur un lien permet de naviguer vers : – un autre endroit d’une même page Web ; – une autre page Web du même site Web – un document quelconque – un autre site web – un autre service d’Internet  En général, un lien est indiqué par du texte souligné ou par un changement d’apparence du pointeur de la souris.  Dans un navigateur, le passage du pointeur sur un lien fait afficher la cible sur la barre d’état
  • 16. Les liens vers un autre site 1) Sélectionner le texte du futur lien 2) Choisir l’onglet « Commun » 3) Cliquer sur la chaîne 4) Saisir l’adresse du site 5) Valider
  • 17. Les liens avec une adresse mail 1) Sélectionner le texte du futur lien 2) Choisir l’onglet « Commun » 3) Cliquer sur l’enveloppe 4) Saisir l’adresse électronique 5) Valider
  • 18. Les liens vers un autre document du site 1) Sélectionner le texte du futur lien 2) Choisir l’onglet « Commun » 3) Cliquer sur la chaîne 4) Aller chercher le document 5) Valider
  • 19. Les liens vers une partie du document (1/2) 1) Positionner le curseur avant la partie ciblée 2) Cliquer sur l’ancre de l’onglet « Commun » 3) Nommer ou identifier la partie ciblée 4) Valider
  • 20. Les liens vers une partie du document (2/2) 1) Sélectionner le texte du futur lien 2) Saisir le caractère "#" suivi du nom de la partie ciblée Symbole de la partie ciblée ou ancre
  • 21. Propriétés de la page présentation Il s’agit de définir les propriétés: • de l’avant-plan, de l’arrière-plan, de marge, etc. Pour définir les propriétés de la page : • Cliquer sur le menu « Modifier » puis choisir « Propriétés de la page » • Utiliser le raccourci « Ctrl+J »
  • 22. Propriétés de la page texte, arrière-plan et marges Cliquer sur la flèche pour choisir une couleur Cliquer sur la flèche pour choisir une police
  • 23. Propriétés de la page les liens Cliquer sur le menu « Liens »
  • 24. Propriétés de la page les en-têtes Cliquer sur le menu « En-têtes »
  • 25. Propriétés de la page titre et codage Cliquer sur le menu « Titre/codage »
  • 26. Propriétés de la page le tracé de l’image • Un tracé d'image est une image qui apparaît à l'arrière-plan de la fenêtre de document et peut être utilisé comme guide pour reproduire une mise en page • Le tracé de l'image est uniquement visible dans Dreamweaver Cliquer sur le menu « Tracé de l’image »
  • 27. Les images présentation  Avantage : « une image vaut mille mots »  Inconvénient : sa taille peut retarder le chargement de la page  Solution : compression (réduction de la taille)  Deux principales techniques de compression : – compression destructive : supprimer des couleurs qu’un humain n’est pas censé déceler. Cependant un fort taux de compression peut entamer la qualité de l’image. – compression non destructive : ce type de compression ne détruit absolument pas l'image 27
  • 28. Les images principaux formats Web Format Couleurs Compression Usage jpeg (Joint Photographic Experts Group) 16 777 216 destructive Photographies gif (Graphics Interchange Format) 256 Non destructive Logos, images animées, transparence à 2 niveaux (transparent ou opaque). png 8 bits (Portable Network Graphic) 256 Non destructive Boutons graphiques , flèches de navigation et petites icônes png 24 bits 16 777 216 Non destructive Logos, boutons graphiques détaillés, captures d’écran et transparence à plusieurs niveaux28
  • 29. Les images insertion 2)Choisir « Insertion>Image » ou Taper «Ctrl+Alt+I » ou cliquer sur l’icône Images de l’onglet « Commun » 3)Sélectionner la source de l’image 4) Valider 1)Placer le point d’insertion à l’endroit où doit apparaître l’image
  • 30. Les images propriétés Après l’insertion, en cliquant sur l’image, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Aperçu nom dimensions source Image-lien Texte alternatif Outils pour modifier Créer des zones réactives Espaces horizontal et vertical autour de l’image Image alternative de taille réduite s’affichant avant l’image Épaisseur de la bordure de l’image-lien Alignement p/r au texte Alignement p/r à la page
  • 31. Les tableaux présentation et insertion • Un tableau permet de présenter l’information d’une manière concise. • Un tableau est constitué de lignes et de colonnes • Chaque intersection d’une ligne et d’une colonne définit une cellule qui contient une donnée. 2)Choisir « Insertion>Tableau » ou Taper «Ctrl+Alt+T » ou cliquer sur l’icône Tableau de l’onglet « Commun » 1)Placer le point d’insertion à l’endroit où doit apparaître le tableau 3) Choisir la taille du tableau, l’en-tête et l’accessibilité puis cliquer sur OK
  • 32. Les tableaux propriétés Après l’insertion, en cliquant sur le tableau, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Largeur en px ou en % Espace entre le contenu d’une cellule et son contour Espace intercellulaire Image d’arrière-plan Épaisseur de la bordure du du tableau Couleur de la bordure du tableau alignement du tableau Couleur d’arrière-plan
  • 33. Les tableaux propriétés d’une ligne ou d’une colonne Après avoir sélectionné une ligne ou une colonne, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Alignement du contenu des cellules sélectionnées Couleur de fond de la sélection Fusionner les cellules de la sélection Largeur et hauteur de la sélection Couleur de la bordure de la sélection Image de fond de la sélection
  • 34. Les tableaux propriétés d’une cellule Après avoir sélectionné une cellule, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Alignement du contenu de la cellule Couleur de fond de la cellule Diviser la cellule en lignes ou en colonnes Largeur et hauteur de la cellule Couleur de la bordure de la cellule Image de fond de la cellule
  • 35. Les formulaires présentation  Les formulaires permettent d’interagir avec l'internaute.  Parmi leurs utilisations courantes on peut noter : • récupérer des informations sur l'utilisateur; • procéder à des authentifications ; • permettre à l'utilisateur de contribuer à un site ; • opérer des recherches ou sélections sur le site ;  L'internaute entre les données en remplissant des champs texte (une ou +sieurs lignes), en cochant une (ou +sieurs) case(s) ou en sélectionnant un (ou des) élément(s) dans une liste.  Ensuite l'internaute soumet les données en cliquant sur un bouton de soumission.  La soumission envoie les données généralement à un script côté serveur sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée.
  • 36. Les formulaires insertion 2) Choisir "Insertion" puis "Formulaire" puis "Formulaire" Ou Cliquer sur l’icône Formulaire de l’onglet "Formulaires" 1)Placer le point d’insertion à l’endroit où doit apparaître le formulaire
  • 37. Les formulaires propriétés Après avoir inséré et sélectionné un formulaire, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Méthode employée pour envoyer les données du formulaire à l'agent de traitement. GET, valeur par défaut, annexe les données du formulaire à l'URL du script cible. POST est la valeur qui incorpore les données du formulaire dans la requête HTTP. Choisir obligatoirement "multipart/form-data" si un fichier doit être joint au formulaire Chemin d’accès de la page ou du script chargé de traiter les données du formulaire
  • 38. Les formulaires les objets de formulaires Les objets de formulaire sont les éléments qui permettent aux utilisateurs d'entrer des données. Les principaux sont : • Champ de texte (une ligne, multi lignes ou mot de passe) • Champ masqué • Cases à cocher • Boutons radio • Menu ou liste • Champ de fichier • Boutons (soumission, réinitialisation, tâches de prétraitement)
  • 39. Les formulaires champ de texte Le champ de texte accepte tout type d'entrée alphanumérique. Identifiant obligatoire du champ nombre maximal de caractères pouvant être affichés dans le champ le texte saisi apparaît sous forme de puces ou d'astérisques pour le protéger du regard de tiers nombre maximum de caractères que peut contenir le champ Valeur affichée dans le champ lors du premier chargement du formulaire
  • 40. Les formulaires champ masqué Un champ masqué est généralement utilisé pour faire passer des informations indirectement renseignées par l’internaute Identifiant obligatoire du champ Valeur transmise lors de l'envoi du formulaire
  • 41. Les formulaires zone de texte • Une zone de texte est un champ de texte pour lequel l’option Multi lignes à été activée. • Il permet d’entrer un commentaire sur plusieurs lignes. Identifiant obligatoire du champ largeur du champ occupée à l’écran. nombre de lignes visibles à l’écran texte affichée dans la zone lors du premier chargement du formulaire Désactivé : retour à la ligne sur action exclusive de l’utilisateur, par pression sur la touche Entrée du clavier. Virtuel : retour à la ligne automatique. Ces retours automatiques ne seront pas retranscris lors de l'envoi du formulaire. Physique: sauts automatiques également retranscris lors de l'envoi du formulaire.
  • 42. Les formulaires cases à cocher • Les cases à cocher permettent la mise en forme de réponses à choix multiples. • Associées à une même question, plusieurs cases à cocher peuvent en effet être activées simultanément. Identifiant obligatoire de la case. Cet identifiant doit être le même pour toutes les cases impliquées dans une même question valeur obligatoire de la réponse Activé : la case est cochée dès son affichage dans le navigateur ; l’utilisateur pouvant toutefois la désactiver dans le navigateur
  • 43. Les formulaires boutons radio • Les boutons radio sont utilisés pour l’intégration de réponses à choix unique. • Parmi plusieurs boutons associés à une même question, un seul peut être activé à la fois. Identifiant obligatoire du bouton. Cet identifiant doit être le même pour tous les boutons impliqués dans une même question valeur obligatoire de la réponse Activé : le bouton est coché dès son affichage dans le navigateur ; l’utilisateur pouvant toutefois le désactiver dans le navigateur
  • 44. Les formulaires menu ou liste (présentation) • Un menu est un volet déroulant que l’on peut ouvrir afin d’y saisir un choix et un seul. • Cette option permet de gagner de la place dans un formulaire lorsque le nombre d’entrées est assez important. • Une liste est une zone ouverte, non déroulante, mais composée éventuellement d’un ascenseur permettant d’y naviguer et d’activer une ou plusieurs option(s). On utilise la touche Maj pour ajouter des options consécutives et Ctrl pour ajouter ou soustraire des éléments de la sélection, ponctuellement.
  • 45. Les formulaires menu ou liste (propriétés) Identifiant obligatoire de l’objet
  • 46. Les formulaires champ de fichier Un champ de fichier permet de procéder au téléchargement d’une pièce jointe au formulaire, en activant l’ouverture d’une fenêtre de sélection pour choisir le fichier à attacher au formulaire. Identifiant obligatoire du champ nombre maximal de caractères pouvant être affichés dans le champ nombre maximum de caractères que peut contenir le champ
  • 47. Les formulaires Boutons L’option Bouton permet non seulement l’insertion d’un bouton de soumission du formulaire, mais aussi d’un bouton de réinitialisation ou encore de boutons neutres destinés à accueillir des scripts personnalisés ou des comportements. Identifiant obligatoire du bouton Libellé à afficher sur le bouton Bouton de soumission Bouton de réinitialisation Bouton neutre
  • 48. Les calques présentation • Un calque est un bloc rectangulaire qui garde une position précise par rapport au début du document, prescrite au pixel près, et cela même si le visiteur redimensionne sa fenêtre ou s'il modifie la taille des caractères. • Un calque peut contenir toutes sortes d'éléments (texte, image, tableau, formulaire…). • Un calque peut apparaître, disparaître ou se déplacer à la suite d'une temporisation ou d'une action de l'utilisateur.
  • 49. Les calques insertion Pour insérer un calque, placer le point d'insertion dans la fenêtre de document, puis choisir Insertion > Objets mise en forme > div PA.
  • 50. Les calques propriétés Après l’insertion, en cliquant sur le calque, on peut visualiser et éventuellement modifier ses propriétés au niveau de « l’inspecteur de propriétés ». Identifiant du calque Positionnement du calque : G : position par rapport au bord gauche de la fenêtre S : position par rapport au bord supérieur de la fenêtre L : largeur du calque en pixel H : hauteur du calque Visibilité du calque : defaut : visible visible : le calque est affiché hidden : le calque n'est pas affiché Ordre de superposition. Dans un navigateur, les calques portant les valeurs entières les plus élevées se superposent aux calques portant les valeurs moins élevées.
  • 51. Les calques propriétés (suite) Contrôle la manière dont le calque apparait dans un navigateur lorsque le contenu dépasse la taille spécifiée du calque. Visible : le calque s'agrandit proportionnellement au contenu. Masqué : le contenu supplémentaire ne sera pas affiché dans le navigateur. Défilement : ajout des barres de défilement qu'elles soient nécessaires ou non. Auto : ajout des barres de défilement uniquement lorsque cela est nécessaire. Définit la zone visible du calque. Les coordonnées gauche (G), haut (S), droite (D) et bas (B) pour définir un rectangle dans le champ des coordonnées du calque (en partant du coin supérieur gauche de l'élément PA). Le calque est « détouré » afin que seul le rectangle spécifié soit visible.
  • 52. Le son et la vidéo présentation • Il est possible d'ajouter du son et de la vidéo à une page Web. • Il existe de nombreux types de formats audio et vidéo, mais le mp3 (audio) et le flv (vidéo) sont de loin les plus utilisé sur le Web • Côté client, les navigateurs utilisent des logiciels appelés plug-in ou modules externes pour lire ces objets multimédia. Exemples de plugins : Windows Media Player de Microsoft, Quicktime Player d’Apple, Real Player de Real Networks et Schockwave Player d’Adobe. • Côté serveur, on peut intégrer un fichier Flash qui sera chargé de lire les fichiers multimédia. Exemples de fichiers Flash : dewplayer.swf d’Alsacréation pour les fichiers mp3 flvplayer.swf de Flv-player.net pour les fichier flv
  • 53. Le son et la vidéo insertion 2) Choisir "Insertion" puis "Médias" puis "Plug-in" Ou Cliquer sur l’icône "Média" puis "Plug-in" de l’onglet "Commun" 1)Placer le point d’insertion à l’endroit où doit apparaître l’objet multimédia 3)Aller chercher le fichier multimédia
  • 54. Le son et la vidéo propriétés Identifiant de l’objet multimédia largeur et hauteur allouées à l'objet sur la page le fichier des données source Alignement de l’objet sur la page quantité d'espace blanc, en pixels, au-dessus, en-dessous et de chaque côté du plug-in URL complète du site à partir duquel le navigateur pourra éventuellement télécharger le plug-in. Ouvre une boîte de dialogue permettant d'indiquer des paramètres supplémentaires à transmettre au plug-in largeur de la bordure autour du plug-in