Alphorm.com Formation Dreamweaver CC pour les débutants

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]

Plan

• Présentation du formateur

• Qu’est-ce que Dreamweaver ?

• Plan de la formation

• Public concerné

• Connaissances requises


• Connaissances requises

Présentation du formateur• Jérémy ANDRE

• [email protected]

• Formateur Web et Photoshop

• Fondateur d’AJMAGEEntreprise belge spécialisée dans le WEB / MOBILE / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION


/ 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

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.


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


� Images, vidéos, …

• Les feuilles de style

• Les tableaux

• Gérer un site et le paramétrer

• Responsive Design dans Dreamweaver

• Bonus

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.


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

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


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

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


• Lien pratique

� https://helpx.adobe.com/dreamweaver/tutorials.html

• Livres conseillés

� http://amzn.to/1KQXLF3

� http://bit.ly/1FEYtlh

Les autres formations dév web


Let’s GOJe vous souhaite une bonne formation ;)


INTERFACE ET

INTRODUCTION À DW


Qu’est-ce qu’un WYSIWYG ?



Plan• Définition

• Historique

• Utilisation

• Limite d’utilisation


• En résumé

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


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

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.


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


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.

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 à


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.

En résumé

• Positif :

� Facilité d’utilisation,

� Convivialité,

� Plus rapide,

� Il ne faut pas être développeur pour l’utiliser.


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

INTERFACE ET

INTRODUCTION À DW


Qu’est-ce que Dreamweaver ?



Plan• Historique

• Avantage du programme

• Nouveautés CS / CC


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


• Simple et intuitif, il est utilisé aussi bien par les néophytes que par les professionnels

• Commercialisé par Macromedia puis racheté par Adobe Systems.

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

Historiquesep

-03-

sep

-05-

juil

-07-

• Dreamweaver MX 2004

• Dreamweaver 8

� Rachat des produits Macromedia par Adobe

• Dreamweaver CS3 (Créative Suite)


-

08-

-12-

juin

-13-

Juin

-14-

� Gros changement dans l’interface

• Dreamweaver CS4, 5, 6

• Dreamweaver CC (Créative Cloud)

• Dreamweaver CC 2014

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


• 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

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


� 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

À LA DÉCOUVERTE

DE DREAMWEAVER


Premier aperçu de l’interface



Plan• Interaction entre les différents langages

• Aspect serveur

• Interprétation de CMS

• Serveur FTP


• Librairie Java Script

• Palette d’insertion

• Barre de propriétés

Serveur FTP


Palette d’insertion


À LA DÉCOUVERTE

DE DREAMWEAVER


Premier aperçu de l’interface



Plan• Interaction entre les différents langages

• Aspect serveur

• Interprétation de CMS

• Serveur FTP


• Librairie Java Script

• Palette d’insertion

• Barre de propriétés

Serveur FTP


Palette d’insertion


À LA DÉCOUVERTE

DE DREAMWEAVER


Différentes vues : code, graphique et direct



Plan• Vue « création »

• Vue « code »

• Vue « direct »

• Vue « fractionner »


Vue « création »


Vue « code »


Vue « direct »


Vue « fractionner »


Intégration du texte

CRÉER DU CONTENU




Plan• Marqueur de texte

• Balise

• Niveau de titre

• Paragraphe et retour à la ligne


• Rechercher / Remplacer

Marqueur de texte


Rechercher / Remplacer


Intégration de Web fonts

CRÉER DU CONTENU




Plan• Qu’est-ce que les librairies de police ?

• Edge Web Fonts

• Intégration dans un fichier HTML

• Google font


Edge Web Fonts


Les listes à puce

CRÉER DU CONTENU




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


• Définition des propriétés d’une liste complète

Liste à puce


Eléments de formulaire

CRÉER DU CONTENU




Plan• Introduction

• Objectif d’un formulaire

• Type de champ

• Importer les éléments


• Designer son formulaire

Type de champ


Hyperliens et ancre

CRÉER DU CONTENU




Plan• Type de liaisons

• Créer un lien interne ou externe

• Propriétés des liens

• Lien relatif ou absolu


• Ancre

Lien


INSERTION ET GESTION

DES MÉDIAS


Intégration d’images



Plan• Formats et résolutions

• Type d’insertion :

� Image

� Image survolée

Texte alternatif


• Texte alternatif

• Alignement des images dans le texte

• Image d’arrière-plan

• Palette des actifs

Image



DES MÉDIAS


Ajout de vidéos et autres médias



Plan• Formats vidéo web

• Panneau « Insertion »

• Liens entre Dreamweaver et les vidéos

• Insertion d’une image de vidéo (poster)


• Propriété de la vidéo

Vidéo


Allers-retours dans Photoshop


DES MÉDIAS


Allers-retours dans Photoshop



Plan• Import

� Les prévisualisations

• Paramètres

• Modification dans Photoshop


• Synchronisation

Smart Objects


Création et intégration d’une feuille de style

LES FEUILLES DE STYLE


d’une feuille de style



Plan• Qu’est-ce qu’une feuille de style

• Inspecteur du navigateur

• Feuilles de style :

� Internes


� Externes

Feuilles de style


Présentation du CSS Designer





Plan• Présentation du panneau CSS Designer

• Sources

• @Requêtes multimédias

• Sélecteurs


• Propriétés

Panneau CSS Designer


Créer divers effets en CSS





Plan• A:hover

• Dégradés

• Ombres

• Coins arrondis


Effets CSS


Création d’un tableau

LES TABLEAUX




Plan• Dans quel cas utiliser des tableaux ?

• Propriétés de formatage d’un tableau :

� Cellules

� Lignes

Tableaux


� Tableaux

• Créer, Supprimer, Modifier des cellules

• Importation données tabulaires

• Redimensionner des tableaux, colonnes et lignes

• Tri de tableaux

Tableau


Création d’un tableau

LES TABLEAUX




Plan• Dans quel cas utiliser des tableaux ?

• Propriétés de formatage d’un tableau :

� Cellules

� Lignes

Tableaux


� Tableaux

• Créer, Supprimer, Modifier des cellules

• Importation données tabulaires

• Redimensionner des tableaux, colonnes et lignes

• Tri de tableaux

Tableau


Fusion de cellules

LES TABLEAUX




Plan• Fusion de cellules

• Copier, Coller, Suppression de cellules

• Intégration de tableaux dans un tableau


Fusion de cellules


GÉRER UN SITE ET

LE PARAMÉTRER


Créer un nouveau Site Web



Plan• Définition du site

• Analyse des ressources

� Création d’un nouveau site

• Création d’un fichier HTML


Mon premier site Web


GÉRER UN SITE

ET LE PARAMÉTRER


Structure d’une page Web



Plan• Utilisation du panneau d’insertion

� Mode fractionné

• Utilisation de l’inspecteur de propriétés

� titre

div


� div

� en-tête

� navigation

� content

� footer

Structure d’une page Web


GÉRER UN SITE

ET LE PARAMÉTRER


Mise en place du contenu



Plan• Collage du texte dans l’espace réservé

• Insertion des images

• Images et légendes

• Création des liens


Images et légendes


GÉRER UN SITE

ET LE PARAMÉTRER


Mise en forme du site (CSS)



Plan• Ajout de feuilles de style

• Application du style

� Centrer des éléments

� Couleur du texte

Police de texte


� Police de texte

• Ajouter des polices Adobe Edge Web Font

� Taille du texte

� Nettoyage de balises Web Fonts Script

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


Mise en forme


GÉRER UN SITE

ET LE PARAMÉTRER


Visualiser un CMS



Plan• Installation d’un serveur local

• Affichage en direct

• Filtrage

• Récupération de fichiers apparentés et associés de manière dynamique


• Outils de gestion dynamiques du langage PHP

Affichage en direct


Modèles de démarrage

RESPONSIVE DESIGN




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


� Menu modèle

� Région modifiable

� Export

Modèle de démarrage


Grilles fluides

RESPONSIVE DESIGN




Plan• Créer un document en grilles fluides

� Les colonnes

� Doctype

� Type de support

• Media Queries


• Media Queries

� CSS Designer @Media

Grilles fluides


Extract Photoshop

BONUS




Plan• Intégrer vos PSD directement dans Dreamweaver

• Panneau « Extract »

� Styles

� Calques

Glisser / Déposer


• Glisser / Déposer

• Récupérer les CSS du PSD

• Mise en page du PSD dans Dreamweaver

Panneau “Extract”


Analyse de la compatibilitéentre les différents navigateurs

BONUS


entre les différents navigateurs



Plan• Tester son site sur un maximum de support

• Adobe Edge Inspector


Compatibilité entre navigateurs


CONCLUSION

DE LA FORMATION


DE LA FORMATION



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


• Il ne faut pas être un expert en programmation

Un petit rappel sur votre formateur• Jérémy ANDRE

• [email protected]

• Formateur Web et Photoshop

• Fondateur d’AJMAGEEntreprise belge spécialisée dans le WEB / MOBILE / IDENTITÉ GRAPHIQUE / GRAPHISME / PHOTO / FORMATION


/ 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

Formation suivante

Dreamweaver pour les intégrateurs ☺


Merci de m’avoir suivi ;)


Merci de m’avoir suivi ;)

Alphorm.com Formation Dreamweaver CC pour les débutants

Technology

Transcript of Alphorm.com Formation Dreamweaver CC pour les débutants