PRÉSENTATION
DE LA FORMATION
Dreamweaver pour les débutants alphorm.com™©
DE LA FORMATION
Site : http://www.alphorm.com
Bl...
Plan
• Présentation du formateur
• Qu’est-ce que Dreamweaver ?
• Plan de la formation
• Public concerné
• Connaissances re...
Présentation du formateur
• Jérémy ANDRE
• jeremy@ajmage.com
• Formateur Web et Photoshop
• Fondateur d’AJMAGE
Entreprise ...
Qu’est-ce que Dreamweaver ?
• Dreamweaver est un logiciel de la Suite Adobe.
• Il permet d’éditer la plupart des fichiers ...
Plan de la formation
• Interface et introduction à Dreamweaver
• À la découverte de Dreamweaver
• Créer du contenu
Textes,...
Public concerné
Cette formation s’adresse :
• Aux débutants désireux d’apprendre à créer leur pas Web,
• les curieux qui s...
Prérequis
• HTML5, CSS 3 et JavaScript (70-480) :
http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et-
javas...
Ressources et liens
• Dreamweaver CC 2014
https://creative.adobe.com/fr/products/creative-cloud
• Le navigateur Chrome
htt...
Les autres formations dév web
Dreamweaver pour les débutants alphorm.com™©
Let’s GO
Je vous souhaite une bonne formation ;)
Dreamweaver pour les débutants alphorm.com™©
INTERFACE ET
INTRODUCTION À DW
Dreamweaver pour les débutants alphorm.com™©
Qu’est-ce qu’un WYSIWYG ?
Site : http://www.al...
Plan
• Définition
• Historique
• Utilisation
• Limite d’utilisation
Dreamweaver pour les débutants alphorm.com™©
• En résu...
Définition
Un WYSIWYG est un logiciel qui dispose
d’une interface utilisateur qui permet de
composer visuellement le résul...
Historique
• Avant la création et la généralisation des logiciels WYSIWYG, les éditeurs de texte
utilisaient une police d'...
Utilisation
• Nous travaillons quotidiennement avec des systèmes de gestion de contenu pour
permettre à nos clients de met...
Limite d’utilisation
• Malheureusement, les WYSIWYG, bien qu’ils aient atteint un niveau avancé de
mise en forme, ne rempl...
En résumé
• Positif :
Facilité d’utilisation,
Convivialité,
Plus rapide,
Il ne faut pas être développeur pour l’utiliser.
...
INTERFACE ET
INTRODUCTION À DW
Dreamweaver pour les débutants alphorm.com™©
Qu’est-ce que Dreamweaver ?
Site : http://www....
Plan
• Historique
• Avantage du programme
• Nouveautés CS / CC
Dreamweaver pour les débutants alphorm.com™©
Historique
• Dreamweaver est un des premiers éditeurs HTML de site web
WYSIWYG, mais également l'un des premiers à intégre...
Historique
• Création de Dreamweaver 1 par Macromedia
L'un des premiers éditeurs HTML de type «WYSIWYG»
• Dreamweaver 2
Aj...
Historique
sep
-03-
sep
-05-
juil
-07-
• Dreamweaver MX 2004
• Dreamweaver 8
Rachat des produits Macromedia par Adobe
• Dr...
Avantage du programme
• Trois modes de conception via le menu d’affichage
Affichage « Création »
Affichage « En direct »
A...
Nouveautés CC
• CSS designer
Outil graphique, génère code CSS : ombres et dégradés
• Grille fluide optimisée
Conception vi...
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Premier aperçu de l’interface
Site : http://ww...
Plan
• Interaction entre les différents langages
• Aspect serveur
• Interprétation de CMS
• Serveur FTP
Dreamweaver pour l...
Serveur FTP
Dreamweaver pour les débutants alphorm.com™©
Palette d’insertion
Dreamweaver pour les débutants alphorm.com™©
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Premier aperçu de l’interface
Site : http://ww...
Plan
• Interaction entre les différents langages
• Aspect serveur
• Interprétation de CMS
• Serveur FTP
Dreamweaver pour l...
Serveur FTP
Dreamweaver pour les débutants alphorm.com™©
Palette d’insertion
Dreamweaver pour les débutants alphorm.com™©
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Différentes vues : code, graphique et direct
S...
Plan
• Vue « création »
• Vue « code »
• Vue « direct »
• Vue « fractionner »
Dreamweaver pour les débutants alphorm.com™©
Vue « création »
Dreamweaver pour les débutants alphorm.com™©
Vue « code »
Dreamweaver pour les débutants alphorm.com™©
Vue « direct »
Dreamweaver pour les débutants alphorm.com™©
Vue « fractionner »
Dreamweaver pour les débutants alphorm.com™©
Intégration du texte
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : ht...
Plan
• Marqueur de texte
• Balise
• Niveau de titre
• Paragraphe et retour à la ligne
Dreamweaver pour les débutants alpho...
Marqueur de texte
Dreamweaver pour les débutants alphorm.com™©
Rechercher / Remplacer
Dreamweaver pour les débutants alphorm.com™©
Intégration de Web fonts
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog ...
Plan
• Qu’est-ce que les librairies de police ?
• Edge Web Fonts
• Intégration dans un fichier HTML
• Google font
Dreamwea...
Edge Web Fonts
Dreamweaver pour les débutants alphorm.com™©
Les listes à puce
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http:...
Plan
• Type de liste à puce
• Création d’une nouvelle liste à puce
• Création d‘une liste à partir d’un texte existant
• C...
Liste à puce
Dreamweaver pour les débutants alphorm.com™©
Eléments de formulaire
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : ...
Plan
• Introduction
• Objectif d’un formulaire
• Type de champ
• Importer les éléments
Dreamweaver pour les débutants alph...
Type de champ
Dreamweaver pour les débutants alphorm.com™©
Hyperliens et ancre
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : htt...
Plan
• Type de liaisons
• Créer un lien interne ou externe
• Propriétés des liens
• Lien relatif ou absolu
Dreamweaver pou...
Lien
Dreamweaver pour les débutants alphorm.com™©
INSERTION ET GESTION
DES MÉDIAS
Dreamweaver pour les débutants alphorm.com™©
Intégration d’images
Site : http://www.alphor...
Plan
• Formats et résolutions
• Type d’insertion :
Image
Image survolée
Texte alternatif
Dreamweaver pour les débutants al...
Image
Dreamweaver pour les débutants alphorm.com™©
INSERTION ET GESTION
DES MÉDIAS
Dreamweaver pour les débutants alphorm.com™©
Ajout de vidéos et autres médias
Site : http:...
Plan
• Formats vidéo web
• Panneau « Insertion »
• Liens entre Dreamweaver et les vidéos
• Insertion d’une image de vidéo ...
Vidéo
Dreamweaver pour les débutants alphorm.com™©
Allers-retours dans Photoshop
INSERTION ET GESTION
DES MÉDIAS
Dreamweaver pour les débutants alphorm.com™©
Allers-retours ...
Plan
• Import
Les prévisualisations
• Paramètres
• Modification dans Photoshop
Dreamweaver pour les débutants alphorm.com™...
Smart Objects
Dreamweaver pour les débutants alphorm.com™©
Création et intégration
d’une feuille de style
LES FEUILLES DE STYLE
Dreamweaver pour les débutants alphorm.com™©
d’une fe...
Plan
• Qu’est-ce qu’une feuille de style
• Inspecteur du navigateur
• Feuilles de style :
Internes
Dreamweaver pour les dé...
Feuilles de style
Dreamweaver pour les débutants alphorm.com™©
Présentation du CSS Designer
LES FEUILLES DE STYLE
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm....
Plan
• Présentation du panneau CSS Designer
• Sources
• @Requêtes multimédias
• Sélecteurs
Dreamweaver pour les débutants ...
Panneau CSS Designer
Dreamweaver pour les débutants alphorm.com™©
Créer divers effets en CSS
LES FEUILLES DE STYLE
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.co...
Plan
• A:hover
• Dégradés
• Ombres
• Coins arrondis
Dreamweaver pour les débutants alphorm.com™©
Effets CSS
Dreamweaver pour les débutants alphorm.com™©
Création d’un tableau
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http:...
Plan
• Dans quel cas utiliser des tableaux ?
• Propriétés de formatage d’un tableau :
Cellules
Lignes
Tableaux
Dreamweaver...
Tableau
Dreamweaver pour les débutants alphorm.com™©
Création d’un tableau
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http:...
Plan
• Dans quel cas utiliser des tableaux ?
• Propriétés de formatage d’un tableau :
Cellules
Lignes
Tableaux
Dreamweaver...
Tableau
Dreamweaver pour les débutants alphorm.com™©
Fusion de cellules
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http://w...
Plan
• Fusion de cellules
• Copier, Coller, Suppression de cellules
• Intégration de tableaux dans un tableau
Dreamweaver ...
Fusion de cellules
Dreamweaver pour les débutants alphorm.com™©
GÉRER UN SITE ET
LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Créer un nouveau Site Web
Site : http://www.al...
Plan
• Définition du site
• Analyse des ressources
Création d’un nouveau site
• Création d’un fichier HTML
Dreamweaver pou...
Mon premier site Web
Dreamweaver pour les débutants alphorm.com™©
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Structure d’une page Web
Site : http://www.alp...
Plan
• Utilisation du panneau d’insertion
Mode fractionné
• Utilisation de l’inspecteur de propriétés
titre
div
Dreamweave...
Structure d’une page Web
Dreamweaver pour les débutants alphorm.com™©
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Mise en place du contenu
Site : http://www.alp...
Plan
• Collage du texte dans l’espace réservé
• Insertion des images
• Images et légendes
• Création des liens
Dreamweaver...
Images et légendes
Dreamweaver pour les débutants alphorm.com™©
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Mise en forme du site (CSS)
Site : http://www....
Plan
• Ajout de feuilles de style
• Application du style
Centrer des éléments
Couleur du texte
Police de texte
Dreamweaver...
Plan
• Mise en forme de la barre de navigation
Mise en forme de la liste
Ajout d’états de bouton
Affichage de la page acti...
Mise en forme
Dreamweaver pour les débutants alphorm.com™©
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Visualiser un CMS
Site : http://www.alphorm.co...
Plan
• Installation d’un serveur local
• Affichage en direct
• Filtrage
• Récupération de fichiers apparentés et associés ...
Affichage en direct
Dreamweaver pour les débutants alphorm.com™©
Modèles de démarrage
RESPONSIVE DESIGN
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : h...
Plan
• Utiliser un modèle de page prédéfini
Préférences
Modification du contenu
• Créer un modèle de page
Menu modèle
Drea...
Modèle de démarrage
Dreamweaver pour les débutants alphorm.com™©
Grilles fluides
RESPONSIVE DESIGN
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http:/...
Plan
• Créer un document en grilles fluides
Les colonnes
Doctype
Type de support
• Media Queries
Dreamweaver pour les débu...
Grilles fluides
Dreamweaver pour les débutants alphorm.com™©
Extract Photoshop
BONUS
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alpho...
Plan
• Intégrer vos PSD directement dans Dreamweaver
• Panneau « Extract »
Styles
Calques
Glisser / Déposer
Dreamweaver po...
Panneau “Extract”
Dreamweaver pour les débutants alphorm.com™©
Analyse de la compatibilité
entre les différents navigateurs
BONUS
Dreamweaver pour les débutants alphorm.com™©
entre les ...
Plan
• Tester son site sur un maximum de support
• Adobe Edge Inspector
Dreamweaver pour les débutants alphorm.com™©
Compatibilité entre navigateurs
Dreamweaver pour les débutants alphorm.com™©
CONCLUSION
DE LA FORMATION
Dreamweaver pour les débutants alphorm.com™©
DE LA FORMATION
Site : http://www.alphorm.com
Blog...
Ce que nous avons vu ensemble
• Qu’il est très simple de réaliser un site internet grâce à Dreamweaver
• Que les WYSIWYG p...
Un petit rappel sur votre formateur
• Jérémy ANDRE
• jeremy@ajmage.com
• Formateur Web et Photoshop
• Fondateur d’AJMAGE
E...
Formation suivante
Dreamweaver pour les intégrateurs ☺
Dreamweaver pour les débutants alphorm.com™©
Merci de m’avoir suivi ;)
Dreamweaver pour les débutants alphorm.com™©
Merci de m’avoir suivi ;)
Prochain SlideShare
Chargement dans…5
×

Alphorm.com Formation Dreamweaver CC pour les débutants

6 044 vues

Publié le

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-dreamweaver-cc-pour-les-debutants

Cette formation Adobe Dreamweaver CC vous présente l'utilisation de cet outil puissant de création de sites web statiques et dynamiques rapide et efficace.
Très simple et souple d’utilisation, Adobe Dreamweaver CC permet de créer un site internet sans réelle connaissance en développement grâce à son interface intuitive et son mode de "création".

Vous allez découvrir son interface puis traiter les notions de bases comme les listes, les formulaires, les ancres, les tableaux, les médias, les fonts, les CSS…
Ensuite, vous allez maîtriser la gestion et paramétrage des sites web sous Adobe Dreamweaver CC, en plus d'une introduction au responsive design et analyse de la compatibilité cross browsers.

Pour bien assimiler Adobe Dreamweaver CC, vous allez avoir une série d'exercices et d'exemples afin de construire un site final fonctionnel et complet.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
6 044
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 353
Actions
Partages
0
Téléchargements
74
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Alphorm.com Formation Dreamweaver CC pour les débutants

  1. 1. PRÉSENTATION DE LA FORMATION Dreamweaver pour les débutants alphorm.com™© DE LA FORMATION Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  2. 2. Plan • Présentation du formateur • Qu’est-ce que Dreamweaver ? • Plan de la formation • Public concerné • Connaissances requises Dreamweaver pour les débutants alphorm.com™© • Connaissances requises
  3. 3. Présentation du formateur • Jérémy ANDRE • jeremy@ajmage.com • Formateur Web et Photoshop • Fondateur d’AJMAGE Entreprise belge spécialisée dans le WEB / MOBILE / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION Dreamweaver pour les débutants alphorm.com™© / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION • Mes références : Mon profil LinkedIn : https://www.linkedin.com/in/ajmage Mon profil Twitter : https://twitter.com/ajmage Mon profil Alphorm : http://www.alphorm.com/formateur/jeremy-andre
  4. 4. Qu’est-ce que Dreamweaver ? • Dreamweaver est un logiciel de la Suite Adobe. • Il permet d’éditer la plupart des fichiers qui composent le web. • Très simple et souple d’utilisation, il permet de créer ou modifier très facilement l’ensemble des documents d’un site internet. • Il permet de créer un site internet sans réelle connaissance en développement. Dreamweaver pour les débutants alphorm.com™©
  5. 5. Plan de la formation • Interface et introduction à Dreamweaver • À la découverte de Dreamweaver • Créer du contenu Textes, listes à puce, liens, … • Insertion et gestion des médias Images, vidéos, … Dreamweaver pour les débutants alphorm.com™© Images, vidéos, … • Les feuilles de style • Les tableaux • Gérer un site et le paramétrer • Responsive Design dans Dreamweaver • Bonus
  6. 6. Public concerné Cette formation s’adresse : • Aux débutants désireux d’apprendre à créer leur pas Web, • les curieux qui souhaitent apprendre les logiciels de la suite Adobe, • toute personne qui aimerait gérer et/ou modifier leur site internet. Dreamweaver pour les débutants alphorm.com™© Aucun prérequis n’est demandé, la connaissance de l’HTML et du CSS est un plus mais n’est pas indispensable. Attention : • Cette formation n’est pas aux professionnels du Web. • Il ne faut évidemment pas sous-estimer leur travail.
  7. 7. Prérequis • HTML5, CSS 3 et JavaScript (70-480) : http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et- javascript-70-480 • La formation Programmation en HTML5 avec JavaScript et CSS3 vous permet de mettre en œuvre la logique de programmation, créer et utiliser des variables, réaliser des boucles, développer des interfaces utilisateurs, capturer et valider des entrées utilisateurs, stocker des données et créer des applications structurées. • Votre formateur Chamseddine OUERHANI vous guidera durant cette Dreamweaver pour les débutants alphorm.com™© • Votre formateur Chamseddine OUERHANI vous guidera durant cette formation pour apprendre comment utiliser HTML5, CSS3 et JavaScriptpour construire des applications Web évolutives qui peuvent dynamiquement détecter et s’adapter à différentes capacités de périphériques et de formats. • Aussi cette formation vous préparera à l’examen 70-480 qui représente un tronc commun pour prétendre à trois certifications MCSD : Applications Web, Windows Store Apps et Applications SharePoint.
  8. 8. Ressources et liens • Dreamweaver CC 2014 https://creative.adobe.com/fr/products/creative-cloud • Le navigateur Chrome https://www.google.com/chrome/browser/desktop/index.html Lien pratique Dreamweaver pour les débutants alphorm.com™© • Lien pratique https://helpx.adobe.com/dreamweaver/tutorials.html • Livres conseillés http://amzn.to/1KQXLF3 http://bit.ly/1FEYtlh
  9. 9. Les autres formations dév web Dreamweaver pour les débutants alphorm.com™©
  10. 10. Let’s GO Je vous souhaite une bonne formation ;) Dreamweaver pour les débutants alphorm.com™©
  11. 11. INTERFACE ET INTRODUCTION À DW Dreamweaver pour les débutants alphorm.com™© Qu’est-ce qu’un WYSIWYG ? Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  12. 12. Plan • Définition • Historique • Utilisation • Limite d’utilisation Dreamweaver pour les débutants alphorm.com™© • En résumé
  13. 13. Définition Un WYSIWYG est un logiciel qui dispose d’une interface utilisateur qui permet de composer visuellement le résultat voulu. L’utilisateur voit directement à l’écran à quoi ressemblera le résultat final. WYSIWYG est l’acronyme de « What You See Is What You Get » qui Dreamweaver pour les débutants alphorm.com™© « What You See Is What You Get » qui signifie littéralement en français « Ce que vous voyez est ce que vous obtenez » La plupart du temps, un WYSIWYG se manifeste sous la forme d’une liste d’options de formatage au-dessus d’un champ texte.
  14. 14. Historique • Avant la création et la généralisation des logiciels WYSIWYG, les éditeurs de texte utilisaient une police d'écriture standard. • L'utilisateur devait choisir des caractères non imprimables pour indiquer que le texte était en gras, en italique ou d'une taille spécifique. Chaque programme disposait de son propre langage, et il était donc difficile de passer d'un logiciel à un autre. Dreamweaver pour les débutants alphorm.com™©
  15. 15. Utilisation • Nous travaillons quotidiennement avec des systèmes de gestion de contenu pour permettre à nos clients de mettre à jour leur propre site internet. Le WYSIWYG permet à un éditeur de mettre en forme le contenu de ses pages sans connaissance du code HTML. • Les WYSIWYG transforment le contenu rédigé par l’utilisateur en code HTML. Ça permet de Dreamweaver pour les débutants alphorm.com™© en code HTML. Ça permet de créer des balises sémantiques qui en plus de mettre en forme le texte, informent Google et les outils d’accessibilité de l’importance de chaque élément.
  16. 16. Limite d’utilisation • Malheureusement, les WYSIWYG, bien qu’ils aient atteint un niveau avancé de mise en forme, ne remplissent pas complètement leurs missions sémantiques. Tout comme dans un logiciel d’édition de texte, la mise en forme prend souvent le dessus sur l’organisation des idées. • Lorsqu’il s’agit de code HTML, la moindre erreur peut influencer les performances SEO et même la cohérence d’une page. L’organisation d’une page en titre, sous- titre, paragraphe, liste et tableau est primordiale à une esthétique cohérente et à Dreamweaver pour les débutants alphorm.com™© titre, paragraphe, liste et tableau est primordiale à une esthétique cohérente et à une compréhension optimale du contenu. • Comme il peine à deviner ce que l’auteur signifie réellement lorsqu’il ajuste l’affichage, le WYSIWYG génère du code HTML souvent approximatif.
  17. 17. En résumé • Positif : Facilité d’utilisation, Convivialité, Plus rapide, Il ne faut pas être développeur pour l’utiliser. Dreamweaver pour les débutants alphorm.com™© Il ne faut pas être développeur pour l’utiliser. • Négatif : Erreur possible dans le code HTML, Problème de performance SEO. • Bien que les WYSIWYG restent des outils capables de nous faciliter la vie, ils ne remplaceront pas la vigilance et l’expérience du développeur.
  18. 18. INTERFACE ET INTRODUCTION À DW Dreamweaver pour les débutants alphorm.com™© Qu’est-ce que Dreamweaver ? Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  19. 19. Plan • Historique • Avantage du programme • Nouveautés CS / CC Dreamweaver pour les débutants alphorm.com™©
  20. 20. Historique • Dreamweaver est un des premiers éditeurs HTML de site web WYSIWYG, mais également l'un des premiers à intégrer un gestionnaire de site. • Ces innovations l’imposèrent rapidement comme l’un des principaux éditeurs de site internet. • Simple et intuitif, il est utilisé aussi bien par les néophytes que par les Dreamweaver pour les débutants alphorm.com™© • Simple et intuitif, il est utilisé aussi bien par les néophytes que par les professionnels • Commercialisé par Macromedia puis racheté par Adobe Systems.
  21. 21. Historique • Création de Dreamweaver 1 par Macromedia L'un des premiers éditeurs HTML de type «WYSIWYG» • Dreamweaver 2 Ajout de la création de modèles de pages Dreamweaver 4 dec -97- dec dec -98- Dreamweaver pour les débutants alphorm.com™© • Dreamweaver 4 Intégration de langages serveur (php, asp) • Dreamweaver MX Développer des applications dynamiques sans connaissance préalable des langages de programmation. mai -02- dec -00-
  22. 22. Historique sep -03- sep -05- juil -07- • Dreamweaver MX 2004 • Dreamweaver 8 Rachat des produits Macromedia par Adobe • Dreamweaver CS3 (Créative Suite) Dreamweaver pour les débutants alphorm.com™© - 08- -12-juin -13- Juin -14- Gros changement dans l’interface • Dreamweaver CS4, 5, 6 • Dreamweaver CC (Créative Cloud) • Dreamweaver CC 2014
  23. 23. Avantage du programme • Trois modes de conception via le menu d’affichage Affichage « Création » Affichage « En direct » Affichage « Code » • Passage facile d’un mode à l’autre ou affichage mixte Dreamweaver pour les débutants alphorm.com™© • Passage facile d’un mode à l’autre ou affichage mixte • Permet d’éditer pratiquement tous les langages de programmation web • Modèles de page • Création facile de feuille de style • Il ne faut pas être programmeur pour pouvoir l’utiliser
  24. 24. Nouveautés CC • CSS designer Outil graphique, génère code CSS : ombres et dégradés • Grille fluide optimisée Conception visuelle des contenus web adaptatifs : différents formats d’écran • Synchronisation des paramètres Dreamweaver pour les débutants alphorm.com™© Synchronisation des préférences et paramètre via « Creative Cloud » sur n’importe quel ordinateur • Affichage en direct Modification et prévisualisation plus rapide • Modèle de démarrage Mises en page intégrées et personnalisables
  25. 25. À LA DÉCOUVERTE DE DREAMWEAVER Dreamweaver pour les débutants alphorm.com™© Premier aperçu de l’interface Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  26. 26. Plan • Interaction entre les différents langages • Aspect serveur • Interprétation de CMS • Serveur FTP Dreamweaver pour les débutants alphorm.com™© • Librairie Java Script • Palette d’insertion • Barre de propriétés
  27. 27. Serveur FTP Dreamweaver pour les débutants alphorm.com™©
  28. 28. Palette d’insertion Dreamweaver pour les débutants alphorm.com™©
  29. 29. À LA DÉCOUVERTE DE DREAMWEAVER Dreamweaver pour les débutants alphorm.com™© Premier aperçu de l’interface Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  30. 30. Plan • Interaction entre les différents langages • Aspect serveur • Interprétation de CMS • Serveur FTP Dreamweaver pour les débutants alphorm.com™© • Librairie Java Script • Palette d’insertion • Barre de propriétés
  31. 31. Serveur FTP Dreamweaver pour les débutants alphorm.com™©
  32. 32. Palette d’insertion Dreamweaver pour les débutants alphorm.com™©
  33. 33. À LA DÉCOUVERTE DE DREAMWEAVER Dreamweaver pour les débutants alphorm.com™© Différentes vues : code, graphique et direct Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  34. 34. Plan • Vue « création » • Vue « code » • Vue « direct » • Vue « fractionner » Dreamweaver pour les débutants alphorm.com™©
  35. 35. Vue « création » Dreamweaver pour les débutants alphorm.com™©
  36. 36. Vue « code » Dreamweaver pour les débutants alphorm.com™©
  37. 37. Vue « direct » Dreamweaver pour les débutants alphorm.com™©
  38. 38. Vue « fractionner » Dreamweaver pour les débutants alphorm.com™©
  39. 39. Intégration du texte CRÉER DU CONTENU Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  40. 40. Plan • Marqueur de texte • Balise • Niveau de titre • Paragraphe et retour à la ligne Dreamweaver pour les débutants alphorm.com™© • Rechercher / Remplacer
  41. 41. Marqueur de texte Dreamweaver pour les débutants alphorm.com™©
  42. 42. Rechercher / Remplacer Dreamweaver pour les débutants alphorm.com™©
  43. 43. Intégration de Web fonts CRÉER DU CONTENU Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  44. 44. Plan • Qu’est-ce que les librairies de police ? • Edge Web Fonts • Intégration dans un fichier HTML • Google font Dreamweaver pour les débutants alphorm.com™©
  45. 45. Edge Web Fonts Dreamweaver pour les débutants alphorm.com™©
  46. 46. Les listes à puce CRÉER DU CONTENU Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  47. 47. Plan • Type de liste à puce • Création d’une nouvelle liste à puce • Création d‘une liste à partir d’un texte existant • Création d’une liste imbriquée Dreamweaver pour les débutants alphorm.com™© • Définition des propriétés d’une liste complète
  48. 48. Liste à puce Dreamweaver pour les débutants alphorm.com™©
  49. 49. Eléments de formulaire CRÉER DU CONTENU Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  50. 50. Plan • Introduction • Objectif d’un formulaire • Type de champ • Importer les éléments Dreamweaver pour les débutants alphorm.com™© • Designer son formulaire
  51. 51. Type de champ Dreamweaver pour les débutants alphorm.com™©
  52. 52. Hyperliens et ancre CRÉER DU CONTENU Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  53. 53. Plan • Type de liaisons • Créer un lien interne ou externe • Propriétés des liens • Lien relatif ou absolu Dreamweaver pour les débutants alphorm.com™© • Ancre
  54. 54. Lien Dreamweaver pour les débutants alphorm.com™©
  55. 55. INSERTION ET GESTION DES MÉDIAS Dreamweaver pour les débutants alphorm.com™© Intégration d’images Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  56. 56. Plan • Formats et résolutions • Type d’insertion : Image Image survolée Texte alternatif Dreamweaver pour les débutants alphorm.com™© • Texte alternatif • Alignement des images dans le texte • Image d’arrière-plan • Palette des actifs
  57. 57. Image Dreamweaver pour les débutants alphorm.com™©
  58. 58. INSERTION ET GESTION DES MÉDIAS Dreamweaver pour les débutants alphorm.com™© Ajout de vidéos et autres médias Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  59. 59. Plan • Formats vidéo web • Panneau « Insertion » • Liens entre Dreamweaver et les vidéos • Insertion d’une image de vidéo (poster) Dreamweaver pour les débutants alphorm.com™© • Propriété de la vidéo
  60. 60. Vidéo Dreamweaver pour les débutants alphorm.com™©
  61. 61. Allers-retours dans Photoshop INSERTION ET GESTION DES MÉDIAS Dreamweaver pour les débutants alphorm.com™© Allers-retours dans Photoshop Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  62. 62. Plan • Import Les prévisualisations • Paramètres • Modification dans Photoshop Dreamweaver pour les débutants alphorm.com™© • Synchronisation
  63. 63. Smart Objects Dreamweaver pour les débutants alphorm.com™©
  64. 64. Création et intégration d’une feuille de style LES FEUILLES DE STYLE Dreamweaver pour les débutants alphorm.com™© d’une feuille de style Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  65. 65. Plan • Qu’est-ce qu’une feuille de style • Inspecteur du navigateur • Feuilles de style : Internes Dreamweaver pour les débutants alphorm.com™© Externes
  66. 66. Feuilles de style Dreamweaver pour les débutants alphorm.com™©
  67. 67. Présentation du CSS Designer LES FEUILLES DE STYLE Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  68. 68. Plan • Présentation du panneau CSS Designer • Sources • @Requêtes multimédias • Sélecteurs Dreamweaver pour les débutants alphorm.com™© • Propriétés
  69. 69. Panneau CSS Designer Dreamweaver pour les débutants alphorm.com™©
  70. 70. Créer divers effets en CSS LES FEUILLES DE STYLE Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  71. 71. Plan • A:hover • Dégradés • Ombres • Coins arrondis Dreamweaver pour les débutants alphorm.com™©
  72. 72. Effets CSS Dreamweaver pour les débutants alphorm.com™©
  73. 73. Création d’un tableau LES TABLEAUX Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  74. 74. Plan • Dans quel cas utiliser des tableaux ? • Propriétés de formatage d’un tableau : Cellules Lignes Tableaux Dreamweaver pour les débutants alphorm.com™© Tableaux • Créer, Supprimer, Modifier des cellules • Importation données tabulaires • Redimensionner des tableaux, colonnes et lignes • Tri de tableaux
  75. 75. Tableau Dreamweaver pour les débutants alphorm.com™©
  76. 76. Création d’un tableau LES TABLEAUX Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  77. 77. Plan • Dans quel cas utiliser des tableaux ? • Propriétés de formatage d’un tableau : Cellules Lignes Tableaux Dreamweaver pour les débutants alphorm.com™© Tableaux • Créer, Supprimer, Modifier des cellules • Importation données tabulaires • Redimensionner des tableaux, colonnes et lignes • Tri de tableaux
  78. 78. Tableau Dreamweaver pour les débutants alphorm.com™©
  79. 79. Fusion de cellules LES TABLEAUX Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  80. 80. Plan • Fusion de cellules • Copier, Coller, Suppression de cellules • Intégration de tableaux dans un tableau Dreamweaver pour les débutants alphorm.com™©
  81. 81. Fusion de cellules Dreamweaver pour les débutants alphorm.com™©
  82. 82. GÉRER UN SITE ET LE PARAMÉTRER Dreamweaver pour les débutants alphorm.com™© Créer un nouveau Site Web Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  83. 83. Plan • Définition du site • Analyse des ressources Création d’un nouveau site • Création d’un fichier HTML Dreamweaver pour les débutants alphorm.com™©
  84. 84. Mon premier site Web Dreamweaver pour les débutants alphorm.com™©
  85. 85. GÉRER UN SITE ET LE PARAMÉTRER Dreamweaver pour les débutants alphorm.com™© Structure d’une page Web Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  86. 86. Plan • Utilisation du panneau d’insertion Mode fractionné • Utilisation de l’inspecteur de propriétés titre div Dreamweaver pour les débutants alphorm.com™© div en-tête navigation content footer
  87. 87. Structure d’une page Web Dreamweaver pour les débutants alphorm.com™©
  88. 88. GÉRER UN SITE ET LE PARAMÉTRER Dreamweaver pour les débutants alphorm.com™© Mise en place du contenu Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  89. 89. Plan • Collage du texte dans l’espace réservé • Insertion des images • Images et légendes • Création des liens Dreamweaver pour les débutants alphorm.com™©
  90. 90. Images et légendes Dreamweaver pour les débutants alphorm.com™©
  91. 91. GÉRER UN SITE ET LE PARAMÉTRER Dreamweaver pour les débutants alphorm.com™© Mise en forme du site (CSS) Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  92. 92. Plan • Ajout de feuilles de style • Application du style Centrer des éléments Couleur du texte Police de texte Dreamweaver pour les débutants alphorm.com™© Police de texte • Ajouter des polices Adobe Edge Web Font Taille du texte Nettoyage de balises Web Fonts Script
  93. 93. Plan • Mise en forme de la barre de navigation Mise en forme de la liste Ajout d’états de bouton Affichage de la page active Dreamweaver pour les débutants alphorm.com™©
  94. 94. Mise en forme Dreamweaver pour les débutants alphorm.com™©
  95. 95. GÉRER UN SITE ET LE PARAMÉTRER Dreamweaver pour les débutants alphorm.com™© Visualiser un CMS Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  96. 96. Plan • Installation d’un serveur local • Affichage en direct • Filtrage • Récupération de fichiers apparentés et associés de manière dynamique Dreamweaver pour les débutants alphorm.com™© • Outils de gestion dynamiques du langage PHP
  97. 97. Affichage en direct Dreamweaver pour les débutants alphorm.com™©
  98. 98. Modèles de démarrage RESPONSIVE DESIGN Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  99. 99. Plan • Utiliser un modèle de page prédéfini Préférences Modification du contenu • Créer un modèle de page Menu modèle Dreamweaver pour les débutants alphorm.com™© Menu modèle Région modifiable Export
  100. 100. Modèle de démarrage Dreamweaver pour les débutants alphorm.com™©
  101. 101. Grilles fluides RESPONSIVE DESIGN Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  102. 102. Plan • Créer un document en grilles fluides Les colonnes Doctype Type de support • Media Queries Dreamweaver pour les débutants alphorm.com™© • Media Queries CSS Designer @Media
  103. 103. Grilles fluides Dreamweaver pour les débutants alphorm.com™©
  104. 104. Extract Photoshop BONUS Dreamweaver pour les débutants alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  105. 105. Plan • Intégrer vos PSD directement dans Dreamweaver • Panneau « Extract » Styles Calques Glisser / Déposer Dreamweaver pour les débutants alphorm.com™© • Glisser / Déposer • Récupérer les CSS du PSD • Mise en page du PSD dans Dreamweaver
  106. 106. Panneau “Extract” Dreamweaver pour les débutants alphorm.com™©
  107. 107. Analyse de la compatibilité entre les différents navigateurs BONUS Dreamweaver pour les débutants alphorm.com™© entre les différents navigateurs Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  108. 108. Plan • Tester son site sur un maximum de support • Adobe Edge Inspector Dreamweaver pour les débutants alphorm.com™©
  109. 109. Compatibilité entre navigateurs Dreamweaver pour les débutants alphorm.com™©
  110. 110. CONCLUSION DE LA FORMATION Dreamweaver pour les débutants alphorm.com™© DE LA FORMATION Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Jérémy ANDRE Formateur Web et Photoshop Fondateur d’AJMAGE Contact : jeremy@ajmage.com
  111. 111. Ce que nous avons vu ensemble • Qu’il est très simple de réaliser un site internet grâce à Dreamweaver • Que les WYSIWYG permette d’aller très loin dans le processus de création web. Ils ont leur limite • Il ne faut pas être un expert en programmation Dreamweaver pour les débutants alphorm.com™© • Il ne faut pas être un expert en programmation
  112. 112. Un petit rappel sur votre formateur • Jérémy ANDRE • jeremy@ajmage.com • Formateur Web et Photoshop • Fondateur d’AJMAGE Entreprise belge spécialisée dans le WEB / MOBILE / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION Dreamweaver pour les débutants alphorm.com™© / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION • Mes références : Mon profil LinkedIn : https://www.linkedin.com/in/ajmage Mon profil Twiter : https://twitter.com/ajmage Mon profil Alphorm : http://www.alphorm.com/formateur/jeremy-andre
  113. 113. Formation suivante Dreamweaver pour les intégrateurs ☺ Dreamweaver pour les débutants alphorm.com™©
  114. 114. Merci de m’avoir suivi ;) Dreamweaver pour les débutants alphorm.com™© Merci de m’avoir suivi ;)

×