alphorm.com formation dreamweaver cc pour les débutants
TRANSCRIPT
![Page 1: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/1.jpg)
PRÉSENTATION
DE LA FORMATION
Dreamweaver pour les débutants alphorm.com™©
DE LA FORMATION
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 2: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/2.jpg)
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
![Page 3: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/3.jpg)
Présentation du formateur• Jérémy ANDRE
• Formateur Web et Photoshop
• Fondateur d’AJMAGEEntreprise 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
![Page 4: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/4.jpg)
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™©
![Page 5: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/5.jpg)
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
![Page 6: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/6.jpg)
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.
![Page 7: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/7.jpg)
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.
![Page 8: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/8.jpg)
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
![Page 9: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/9.jpg)
Les autres formations dév web
Dreamweaver pour les débutants alphorm.com™©
![Page 10: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/10.jpg)
Let’s GOJe vous souhaite une bonne formation ;)
Dreamweaver pour les débutants alphorm.com™©
![Page 11: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/11.jpg)
INTERFACE ET
INTRODUCTION À DW
Dreamweaver pour les débutants alphorm.com™©
Qu’est-ce qu’un WYSIWYG ?
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 12: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/12.jpg)
Plan• Définition
• Historique
• Utilisation
• Limite d’utilisation
Dreamweaver pour les débutants alphorm.com™©
• En résumé
![Page 13: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/13.jpg)
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 listed’options de formatage au-dessus d’un champ texte.
![Page 14: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/14.jpg)
Historique
• Avant la création et la généralisation des logiciels WYSIWYG, les éditeurs de texteutilisaient 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 programmedisposait de son propre langage, et il était donc difficile de passer d'un logiciel àun autre.
Dreamweaver pour les débutants alphorm.com™©
![Page 15: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/15.jpg)
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 transformentle contenu rédigé par l’utilisateuren code HTML. Ça permet de
Dreamweaver pour les débutants alphorm.com™©
en code HTML. Ça permet de créer des balises sémantiquesqui en plus de mettre en formele texte, informent Google et les outils d’accessibilité de l’importance de chaque élément.
![Page 16: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/16.jpg)
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 ajustel’affichage, le WYSIWYG génère du code HTML souvent approximatif.
![Page 17: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/17.jpg)
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.
![Page 18: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/18.jpg)
INTERFACE ET
INTRODUCTION À DW
Dreamweaver pour les débutants alphorm.com™©
Qu’est-ce que Dreamweaver ?
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 19: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/19.jpg)
Plan• Historique
• Avantage du programme
• Nouveautés CS / CC
Dreamweaver pour les débutants alphorm.com™©
![Page 20: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/20.jpg)
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.
![Page 21: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/21.jpg)
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-
![Page 22: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/22.jpg)
Historiquesep
-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
![Page 23: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/23.jpg)
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
![Page 24: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/24.jpg)
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
![Page 25: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/25.jpg)
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Premier aperçu de l’interface
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 26: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/26.jpg)
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
![Page 27: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/27.jpg)
Serveur FTP
Dreamweaver pour les débutants alphorm.com™©
![Page 28: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/28.jpg)
Palette d’insertion
Dreamweaver pour les débutants alphorm.com™©
![Page 29: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/29.jpg)
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Premier aperçu de l’interface
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 30: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/30.jpg)
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
![Page 31: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/31.jpg)
Serveur FTP
Dreamweaver pour les débutants alphorm.com™©
![Page 32: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/32.jpg)
Palette d’insertion
Dreamweaver pour les débutants alphorm.com™©
![Page 33: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/33.jpg)
À LA DÉCOUVERTE
DE DREAMWEAVER
Dreamweaver pour les débutants alphorm.com™©
Différentes vues : code, graphique et direct
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 34: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/34.jpg)
Plan• Vue « création »
• Vue « code »
• Vue « direct »
• Vue « fractionner »
Dreamweaver pour les débutants alphorm.com™©
![Page 35: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/35.jpg)
Vue « création »
Dreamweaver pour les débutants alphorm.com™©
![Page 36: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/36.jpg)
Vue « code »
Dreamweaver pour les débutants alphorm.com™©
![Page 37: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/37.jpg)
Vue « direct »
Dreamweaver pour les débutants alphorm.com™©
![Page 38: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/38.jpg)
Vue « fractionner »
Dreamweaver pour les débutants alphorm.com™©
![Page 39: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/39.jpg)
Intégration du texte
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 40: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/40.jpg)
Plan• Marqueur de texte
• Balise
• Niveau de titre
• Paragraphe et retour à la ligne
Dreamweaver pour les débutants alphorm.com™©
• Rechercher / Remplacer
![Page 41: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/41.jpg)
Marqueur de texte
Dreamweaver pour les débutants alphorm.com™©
![Page 42: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/42.jpg)
Rechercher / Remplacer
Dreamweaver pour les débutants alphorm.com™©
![Page 43: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/43.jpg)
Intégration de Web fonts
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 44: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/44.jpg)
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™©
![Page 45: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/45.jpg)
Edge Web Fonts
Dreamweaver pour les débutants alphorm.com™©
![Page 46: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/46.jpg)
Les listes à puce
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 47: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/47.jpg)
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
![Page 48: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/48.jpg)
Liste à puce
Dreamweaver pour les débutants alphorm.com™©
![Page 49: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/49.jpg)
Eléments de formulaire
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 50: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/50.jpg)
Plan• Introduction
• Objectif d’un formulaire
• Type de champ
• Importer les éléments
Dreamweaver pour les débutants alphorm.com™©
• Designer son formulaire
![Page 51: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/51.jpg)
Type de champ
Dreamweaver pour les débutants alphorm.com™©
![Page 52: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/52.jpg)
Hyperliens et ancre
CRÉER DU CONTENU
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 53: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/53.jpg)
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
![Page 54: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/54.jpg)
Lien
Dreamweaver pour les débutants alphorm.com™©
![Page 55: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/55.jpg)
INSERTION ET GESTION
DES MÉDIAS
Dreamweaver pour les débutants alphorm.com™©
Intégration d’images
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 56: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/56.jpg)
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
![Page 57: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/57.jpg)
Image
Dreamweaver pour les débutants alphorm.com™©
![Page 58: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/58.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 59: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/59.jpg)
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
![Page 60: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/60.jpg)
Vidéo
Dreamweaver pour les débutants alphorm.com™©
![Page 61: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/61.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 62: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/62.jpg)
Plan• Import
� Les prévisualisations
• Paramètres
• Modification dans Photoshop
Dreamweaver pour les débutants alphorm.com™©
• Synchronisation
![Page 63: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/63.jpg)
Smart Objects
Dreamweaver pour les débutants alphorm.com™©
![Page 64: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/64.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 65: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/65.jpg)
Plan• Qu’est-ce qu’une feuille de style
• Inspecteur du navigateur
• Feuilles de style :
� Internes
Dreamweaver pour les débutants alphorm.com™©
� Externes
![Page 66: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/66.jpg)
Feuilles de style
Dreamweaver pour les débutants alphorm.com™©
![Page 67: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/67.jpg)
Présentation du CSS Designer
LES FEUILLES DE STYLE
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 68: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/68.jpg)
Plan• Présentation du panneau CSS Designer
• Sources
• @Requêtes multimédias
• Sélecteurs
Dreamweaver pour les débutants alphorm.com™©
• Propriétés
![Page 69: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/69.jpg)
Panneau CSS Designer
Dreamweaver pour les débutants alphorm.com™©
![Page 70: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/70.jpg)
Créer divers effets en CSS
LES FEUILLES DE STYLE
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 71: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/71.jpg)
Plan• A:hover
• Dégradés
• Ombres
• Coins arrondis
Dreamweaver pour les débutants alphorm.com™©
![Page 72: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/72.jpg)
Effets CSS
Dreamweaver pour les débutants alphorm.com™©
![Page 73: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/73.jpg)
Création d’un tableau
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 74: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/74.jpg)
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
![Page 75: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/75.jpg)
Tableau
Dreamweaver pour les débutants alphorm.com™©
![Page 76: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/76.jpg)
Création d’un tableau
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 77: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/77.jpg)
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
![Page 78: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/78.jpg)
Tableau
Dreamweaver pour les débutants alphorm.com™©
![Page 79: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/79.jpg)
Fusion de cellules
LES TABLEAUX
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 80: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/80.jpg)
Plan• Fusion de cellules
• Copier, Coller, Suppression de cellules
• Intégration de tableaux dans un tableau
Dreamweaver pour les débutants alphorm.com™©
![Page 81: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/81.jpg)
Fusion de cellules
Dreamweaver pour les débutants alphorm.com™©
![Page 82: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/82.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 83: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/83.jpg)
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™©
![Page 84: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/84.jpg)
Mon premier site Web
Dreamweaver pour les débutants alphorm.com™©
![Page 85: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/85.jpg)
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Structure d’une page Web
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 86: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/86.jpg)
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
![Page 87: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/87.jpg)
Structure d’une page Web
Dreamweaver pour les débutants alphorm.com™©
![Page 88: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/88.jpg)
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Mise en place du contenu
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 89: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/89.jpg)
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™©
![Page 90: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/90.jpg)
Images et légendes
Dreamweaver pour les débutants alphorm.com™©
![Page 91: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/91.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 92: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/92.jpg)
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
![Page 93: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/93.jpg)
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™©
![Page 94: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/94.jpg)
Mise en forme
Dreamweaver pour les débutants alphorm.com™©
![Page 95: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/95.jpg)
GÉRER UN SITE
ET LE PARAMÉTRER
Dreamweaver pour les débutants alphorm.com™©
Visualiser un CMS
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 96: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/96.jpg)
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
![Page 97: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/97.jpg)
Affichage en direct
Dreamweaver pour les débutants alphorm.com™©
![Page 98: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/98.jpg)
Modèles de démarrage
RESPONSIVE DESIGN
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 99: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/99.jpg)
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
![Page 100: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/100.jpg)
Modèle de démarrage
Dreamweaver pour les débutants alphorm.com™©
![Page 101: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/101.jpg)
Grilles fluides
RESPONSIVE DESIGN
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 102: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/102.jpg)
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
![Page 103: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/103.jpg)
Grilles fluides
Dreamweaver pour les débutants alphorm.com™©
![Page 104: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/104.jpg)
Extract Photoshop
BONUS
Dreamweaver pour les débutants alphorm.com™©
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 105: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/105.jpg)
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
![Page 106: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/106.jpg)
Panneau “Extract”
Dreamweaver pour les débutants alphorm.com™©
![Page 107: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/107.jpg)
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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 108: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/108.jpg)
Plan• Tester son site sur un maximum de support
• Adobe Edge Inspector
Dreamweaver pour les débutants alphorm.com™©
![Page 109: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/109.jpg)
Compatibilité entre navigateurs
Dreamweaver pour les débutants alphorm.com™©
![Page 110: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/110.jpg)
CONCLUSION
DE LA FORMATION
Dreamweaver pour les débutants alphorm.com™©
DE LA FORMATION
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Jérémy ANDREFormateur Web et Photoshop Fondateur d’AJMAGEContact : [email protected]
![Page 111: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/111.jpg)
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
![Page 112: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/112.jpg)
Un petit rappel sur votre formateur• Jérémy ANDRE
• Formateur Web et Photoshop
• Fondateur d’AJMAGEEntreprise 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
![Page 113: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/113.jpg)
Formation suivante
Dreamweaver pour les intégrateurs ☺
Dreamweaver pour les débutants alphorm.com™©
![Page 114: Alphorm.com Formation Dreamweaver CC pour les débutants](https://reader033.vdocuments.pub/reader033/viewer/2022052312/589cf88e1a28abcc258b6555/html5/thumbnails/114.jpg)
Merci de m’avoir suivi ;)
Dreamweaver pour les débutants alphorm.com™©
Merci de m’avoir suivi ;)