Más contenido relacionado La actualidad más candente (20) Similar a Alphorm.com Formation Dreamweaver CC pour les débutants (20) Alphorm.com Formation Dreamweaver CC pour les débutants1. 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. 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. 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. 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. 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. 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. 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. 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
10. Let’s GO
Je vous souhaite une bonne formation ;)
Dreamweaver pour les débutants alphorm.com™©
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
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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. À 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. 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
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. 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
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. Plan
• Vue « création »
• Vue « code »
• Vue « direct »
• Vue « fractionner »
Dreamweaver pour les débutants alphorm.com™©
36. Vue « code »
Dreamweaver pour les débutants alphorm.com™©
37. Vue « direct »
Dreamweaver pour les débutants alphorm.com™©
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. Plan
• Marqueur de texte
• Balise
• Niveau de titre
• Paragraphe et retour à la ligne
Dreamweaver pour les débutants alphorm.com™©
• Rechercher / Remplacer
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. 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™©
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. 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
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. Plan
• Introduction
• Objectif d’un formulaire
• Type de champ
• Importer les éléments
Dreamweaver pour les débutants alphorm.com™©
• Designer son formulaire
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. 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
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. 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
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. 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
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
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. Plan
• Qu’est-ce qu’une feuille de style
• Inspecteur du navigateur
• Feuilles de style :
Internes
Dreamweaver pour les débutants alphorm.com™©
Externes
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. Plan
• Présentation du panneau CSS Designer
• Sources
• @Requêtes multimédias
• Sélecteurs
Dreamweaver pour les débutants alphorm.com™©
• Propriétés
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
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. 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
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. 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
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. Plan
• Fusion de cellules
• Copier, Coller, Suppression de cellules
• Intégration de tableaux dans un tableau
Dreamweaver pour les débutants alphorm.com™©
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. 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™©
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. 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
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. 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™©
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. 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. 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™©
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. 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
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. 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
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. 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
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. 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
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. Plan
• Tester son site sur un maximum de support
• Adobe Edge Inspector
Dreamweaver pour les débutants alphorm.com™©
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. 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. 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
114. Merci de m’avoir suivi ;)
Dreamweaver pour les débutants alphorm.com™©
Merci de m’avoir suivi ;)