Écran d'accueil

de : Dreamweaver CS6 : Les fondamentaux

Acheter

Abonnez-vous !

À propos de cette vidéo

Dès son ouverture, Dreamweaver nous propose un écran d'accueil aux multiples possibilités accessibles d'un simple clic.

Acheter

Abonnez-vous !

Un extrait de :

Dreamweaver CS6 : Les fondamentaux

€ 49,80

Formations similaires

Découvrons la toute nouvelle version de Dreamweaver CS6 ! Tout en parcourant les fonctionnalités de base de l'outil, nous mettrons en place un site accessible sur téléphone portable comme sur écran de grande résolution.

Introduction
- Tout au long des chapitres, nous alternerons entre un bac à sable où nous expérimenterons certaines fonctionnalités et un fil rouge qui nous servira pour créer un site répondant à l'affichage entre un ordinateur et un téléphone portable.
  
  Présentation de la formation
  
  04:22
Présentons ici un certain nombre de notions indispensables pour travailler efficacement avec Dreamweaver.

Dreamweaver et le web
- Nous allons utiliser au quotidien les langages HTML, CSS et JavaScript pour construire et gérer nos pages web.
  
  Trois langages de programmation utiles
  
  05:11
- L'ensemble des fichiers est consulté dans une relation client serveur. Nous verrons que, lorsque l'on a recours à des langages côté serveur tels que PHP, ASP, ou ColdFusion, il est quand même renvoyé du HTML, CSS et JavaScript côté client.
  
  La relation client serveur
  
  02:03
- Nous verrons ici qu'un éditeur WYSIWYG permet de restituer en temps réel le rendu du code qui est saisi.
  
  Comprendre les éditeurs WYSIWYG
  
  04:02
- Dreamweaver apporte une solution complète et ergonomique pour traiter l'ensemble des phases nécessaires à la réalisation d'un site, de la page blanche jusqu'à la mise en ligne des contenus.
  
  Place et rôle de Dreamweaver
  
  05:24
- Installons maintenant certains navigateurs qui permettront de tester le bon fonctionnement des pages et d'utiliser certains outils pour affiner et enrichir nos contenus.
  
  Les navigateurs et les outils modules externes
  
  04:17
- Avant de travailler sur l'architecture, le contenu et la présentation de nos sites, il est très important de réfléchir à l'accessibilité de ce contenu.
  
  Notions d'accessibilité
  
  07:48
- Il faut également anticiper l'optimisation du contenu et de l'architecture du site pour le référencement auprès des moteurs de recherche.
  
  Notions de référencement
  
  07:23
Avant de mettre en place un site, nous parcourrons dans ce chapitre l'environnement de travail et l'interface utilisateur de Dreamweaver pour en comprendre les finesses.

L'interface utilisateur
- Dès son ouverture, Dreamweaver nous propose un écran d'accueil aux multiples possibilités accessibles d'un simple clic.
  
  Écran d'accueil
  
  06:17
- Que l'on soit sous Windows ou sous Mac OS, Dreamweaver propose exactement les mêmes environnements de travail. Découvrons rapidement l'interface utilisateur.
  
  Découverte de l'interface générale
  
  03:35
- Explorons le fonctionnement et la manipulation des palettes de l'interface de Dreamweaver.
  
  Fonctionnement des palettes
  
  05:46
- Le travail sur un document HTML se partage entre code source et mode de rendu. Dreamweaver nous permet de suivre en permanence ces deux modes.
  
  Code source et mode de rendu
  
  04.32
- De même que Dreamweaver nous permet de travailler sur le fond et la forme, l'inspecteur Propriétés nous permet de basculer entre structure HTML et rendu CSS en fonction de nos choix.
  
  Inspecteur Propriétés
  
  04:39
- Nous allons voir que Dreamweaver sait s'adapter selon notre besoin à différents outils et palettes. Il nous propose de gérer à notre place divers espaces de travail.
  
  Principales palettes et espaces de travail
  
  03:40
- Pour travailler des pages HTML et CSS, il faut faire référence à un projet de site. Mettons en place un site de travail et indiquons tous les paramètres nécessaires.
  
  Gestion d'un site web et paramétrages de base
  
  06:08
- Faisons ici un rapide tour d'horizon des diverses possibilités de réglage de préférences.
  
  Préférences
  
  06:27
Un site est avant tout une collection de page reliées entre elles. Nous allons donc dans ce chapitre étudier les diverses mécaniques à notre disposition.

Créer une page
- Commençons par mettre en place un document HTML de manière traditionnelle, c'est-à-dire depuis un éditeur sans assistance visuelle.
  
  Mise en place d'une page HTML à la main
  
  06:34
- Utilisons cette fois-ci Dreamweaver et son assistance visuelle. Penchons-nous également sur les principales différences entre les différents DOCTYPE.
  
  Mise en place d'une page HTML avec assistance visuelle
  
  07:39
- Si l'on travaille avec des caractères accentués ou des signes commerciaux, il faut s'assurer de leur bonne portabilité sur les navigateurs des différents internautes.
  
  Encodage des caractères
  
  06:37
- Le web sans la notion d'hyperliens n'aurait pas du tout le même intérêt. Explorons donc la fonctionnalité qui a permis à HTML de devenir le langage le plus largement utilisé dans la planète web.
  
  Types d'hyperliens
  
  06:11
- Lier des pages entre elles demande une rigueur d'architecture. Nous présenterons ici les manières de définir des chemins d'accès, absolus ou relatifs.
  
  Lien absolu et lien relatif
  
  06:45
- Les hyperliens à adresse absolue peuvent également pointer vers d'autres protocoles utilisés sur Internet tels que FTP, Gopher, news ou encore mailto.
  
  Liens vers d'autres protocoles
  
  04:39
- Afin d'affiner la navigation au sein des pages ou entre les pages, nous verrons qu'il est possible d'utiliser des ancres nommées.
  
  Ancres
  
  07:35
- Après avoir créé une page, créons maintenant un ensemble de pages de la même manière et relions-les entre elles par des liens. La notion de modèle nous permet de travailler plus efficacement.
  
  Notion de modèle et modèles par défaut
  
  10:28
- Revenons ici sur les notions de structuration et de sémantique de nos contenus, afin de mieux appréhender un des avantages de l'utilisation du HTML5.
  
  HTML5
  
  05:42
Avec le HTML, l'utilisation des CSS permet de mettre en forme rapidement le contenu de nos pages. Nous explorerons dans ce chapitre les différentes possibilités que nous offre Dreamweaver pour implémenter les styles.

Approche des CSS
- Présentons ici les diverses manières de générer et d'utiliser des feuilles de style CSS au sein d'une page HTML.
  
  Définition et principe des CSS
  
  05:40
- Tous les navigateurs ne restituent pas de la même manière les CSS par défaut. Nous allons présenter ici la feuille de réinitialisation.
  
  Feuille CSS de réinitialisation
  
  05:43
- Nous présenterons ici les principaux types de sélecteurs qui permettent la mise en forme du contenu.
  
  Types de sélecteurs
  
  07:54
- Parcourons ici les divers outils qu'offre Dreamweaver pour définir les couples propriétés-valeurs lors de la définition de nos styles. Et utilisons le regroupement par famille.
  
  Les propriétés et leurs familles
  
  05:14
- L'apparition des CSS et l'absence de recommandation fait que les navigateurs proposent tous à leur manière l'intégration des propriétés. En attendant la définition de recommandations, utilisons des préfixes.
  
  Préfixes
  
  08:05
- La palette des CSS est riche de possibilités. Apprenons à manipuler les règles et les déclarations, les CSS deviennent alors un jeu d'enfant.
  
  Travailler avec la palette des CSS
  
  05:32
- Apprenons maintenant à utiliser les commutateurs Tous et Actuel qui permentt de suivre le débogage ou la mise en place d'une feuille de style un peu complexe.
  
  Les commutateurs Tous et Actuel
  
  04:41
- Dreamweaver nous propose l'utilisation d'un affichage en direct, véritable rendu webkit, avec un mode d'inspection qui va matérialiser les marges et les remplissages.
  
  Affichage en direct et inspection
  
  02:38
- Le code Navigator est une palette Inspecteur flottante qui permet d'accéder rapidement à toutes les déclarations appliquées à un objet du DOM.
  
  Code Navigator
  
  02:08
Mettons maintenant en application les fonctionnalités que Dreamweaver nous propose. Mettons en place un site web tout en poursuivant l'exploration de l'IDE de Dreamweaver.

Construire des pages
- En se basant sur la maquette travaillée dans Fireworks, voyons comment Dreamweaver permet de restituer du contenu qui va donc se répartir entre structurel HTML et visuel CSS.
  
  Mise en place du projet et création d'un modèle
  
  06:58
- Une fois le modèle mis en place, nous allons nous concentrer sur l'arborescence du site. Il faut créer le menu principal de navigation et l'ensemble des pages qui en découlent.
  
  Mise en place d'un menu et d'une arborescence
  
  06:15
- Une fois la structure du conteneur mise en place, nous allons travailler sur la structure du contenu en affinant sa nature.
  
  Structure du contenu
  
  04:57
- Mettons en place un premier travail sur les CSS pour placer les éléments dans l'espace.
  
  Première mise en forme des CSS
  
  11:09
- Dreamweaver nous aide à placer et à utiliser beaucoup de balises HTML et ce, par simple clic dans l'interface. Apprenons ici à les utiliser.
  
  Exploration de balises HTML peu ou mal utilisées
  
  09:24
- Faisons un tour d'horizon pour voir quel type de balises utiliser afin d'intégrer les contenus principaux de nos pages.
  
  Organisation des pages
  
  01:58
- Très souvent, les commanditaires de sites travaillent les contenus sous Word. Nous allons voir comment récupérer depuis Dreamweaver le contenu et la structure des documents.
  
  Importation de contenu Word
  
  07:15
- Dreamweaver nous permet de travailler les tableaux de manière assez avancée. L'importation de données tabulées ou de documents Excel est également prise en compte.
  
  Tableaux et importation de données tabulées
  
  11:46
- Apportons ici une seconde couche de mise en forme visuelle et intervenons sur les derniers éléments intégrés dans le contenu de nos pages.
  
  Seconde mise en forme des CSS
  
  09:44
- Le navigateur d'aperçu utilise un moteur de rendu webkit. Couplé à l'outil d'inspection et aux diverses palettes de l'IDE de Dreamweaver, il deviendra vite un outil très précieux.
  
  Navigateur d'aperçu
  
  03:09
Les pages web utilisent l'image bitmap. Explorons dans ce chapitre les formats d'image pour le web puis leur utilisation au sein des pages HTML, qu'il s'agisse d'image de contenu ou d'images d'illustration.

Gestion des images
- Présentons la notion de pixel et de bitmap afin de mieux appréhender les trois principaux formats d'image utilisés sur le web : JPG, GIF et PNG.
  
  Images bitmap
  
  07:55
- Intégrer des images dans le flux d'un document est chose facile avec Dreamweaver, notamment en bénéficiant de l'aide de l'IDE de Dreamweaver.
  
  Insertion de médias image
  
  04:42
- Une fois les images importées dans Dreamweaver, il est toujours possible d'intervenir sur leur aspect.
  
  Modifications permanentes des images
  
  05:15
- Il est également possible de travailler avec des images natives au format PSD qui sera converti en Smart Object (objet dynamique) au sein de Dreamweaver.
  
  Insertion d'objets dynamiques
  
  05:02
- La même possibilité existe avec des formats natifs PNG de Fireworks.
  
  Association d'images au format PNG
  
  04:20
- La gestion des cartes-images est une opération simple dans Dreamweaver. Cependant, n'hésitez pas à basculer dans Fireworks depuis l'inspecteur Propriétés et à travailler en aller-retour entre les deux logiciels.
  
  Interaction entre Dreamweaver et Fireworks
  
  05:50
- Comment utiliser les images pour illustrer nos pages web ? Nous avons le choix entre l'insertion des images dans le code source HTML et le placement de l'image d'illustration en image d'arrière-plan depuis les CSS.
  
  Image de contenu ou d'illustration
  
  06:21
- Intégrons ici l'ensemble des images de contenu et adaptons au cas par cas les feuilles de style.
  
  Ajout des images dans les pages
  
  05:16
- Gérons maintenant l'ensemble des images d'illustrations prises en compte par les feuilles de styles CSS, grâce à la technique des sprites.
  
  Gestion des images dans les CSS
  
  06:40
Nous allons explorer au cours de ce chapitre quelques éléments qui vont nous permettre d'améliorer notre flux de travail et de travailler avec les principaux médias.

Enrichissement du site et gestion des médias
- En complément de l'utilisation des modèles de pages, Dreamweaver nous offre la possibilité d'avoir recours à des éléments de librairie.
  
  Utilisation d'un élément de librairie
  
  07:50
- HTML5 nous permet d'utiliser la balise vidéo et il n'est plus nécessaire de recourir à un plug-in par exemple. L'inconvénient est qu'il faut publier la vidéo sous trois formats différents pour qu'elle soit lue par tous les navigateurs.
  
  Insertion de médias vidéo
  
  07:54
- Nous verrons ici qu'il est toujours possible d'avoir recours aux balises prédéfinies <figure> et <figcaption> afin d'apposer des légendes à nos images ou à nos graphiques.
  
  Création d'une image avec sa légende
  
  02:57
- Nous verrons ici que Dreamweaver nous propose diverses manières d'organiser la gestion des médias. Nous avons le choix entre la palette Fichiers, l'utilisation de Bridge ou encore la palette des actifs.
  
  Palettes des actifs
  
  04:22
- Il est possible d'optimiser la technique des sprites pour les feuilles de style CSS en utilisant qu'un seul et unique fichier graphique.
  
  Gestion d'un menu sprite
  
  08:11
- CSS3 nous permet d'utiliser des propriétés de transformation, au niveau de l'échelle, de la rotation, des déplacements, etc. mais aussi d'appliquer des transitions entre des valeurs de départ et des valeurs d'arrivée.
  
  Application d'une transition
  
  09:02
- Apprenons les différentes manières d'intégrer du contenu Flash à nos pages, en utilisant des fichiers SWF ou FLV.
  
  Ajout de contenu Flash à nos pages
  
  06:55
Nous allons explorer certaines possibilités que nous offre la librairie SPRY. Nous verrons également que Dreamweaver utilise d'autres possibilités notamment dans le panneau Comportements avec des effets ou encore avec les formulaires pour gérer la validation.

La librairie SPRY
- Présentons les différents types de librairies JavaScript qui permettent d'implémenter des fonctionnalités avancées dans nos pages web. Adobe propose un framework, SPRY, directement intégré à Dreamweaver.
  
  Introduction à SPRY
  
  04:06
- Nous verrons ici l'utilisation de l'élément Menu fourni par la librairie SPRY. Celui-ci est très ergonomique et simple.
  
  Barre de menu
  
  05:23
- Penchons-nous maintenant sur les panneaux à onglet et apprenons à les configurer et à les personnaliser.
  
  Panneaux à onglet
  
  05:15
- Le menu Accordéon ne propose pas toutes les options depuis l'inspecteur Propriétés. Nous verrons qu'il est possible d'ajouter rapidement quelques options directement depuis le JavaScript.
  
  Menu Accordéon
  
  04:30
- Le menu Accordéon qui ne contient qu'un seul onglet s'appelle le panneau réductible. Nous apprendrons à l'utiliser et à le personnaliser.
  
  Panneau réductible
  
  01:19
- Une autre merveille d'intégration et d'ergonomie est le composant d'info-bulle SPRY. Nous verrons qu'il est personnalisable à souhait.
  
  Info-bulle
  
  04:52
- En assemblant les fonctionnalités de deux des composants SPRY, les panneaux à onglets et l'insertion de données dynamiques, il va être facile de compléter la page Produits.
  
  Données dynamiques
  
  10:48
- Nous verrons ici que SPRY apporte également une large librairie d'effets visuels qu'il est possible d'utiliser depuis la palette des comportements.
  
  Effets SPRY
  
  04:15
Pour collecter des données depuis une page web, on utilise un formulaire pour les envoyer au serveur. Voyons dans ce chapitre tout ce que cela implique.

Les formulaires
- Avant de placer quelques champs de récupération de données, il faut commencer par décrire le formulaire.
  
  Principes d'un formulaire
  
  04:52
- Nous allons entrer un à un les divers champs de saisie. Nous utiliserons alternativement le mode Code et le mode Création.
  
  Mise en place des balises
  
  09:03
- Une fois l'aspect structurel défini et mis en place, il ne nous reste plus qu'à apporter une touche d'identité visuelle.
  
  Mise en place d'un style sur nos champs
  
  06:19
- Nous verrons ici qu'il existe une grande différence entre HTML4 et HTML5 en ce qui concerne la gestion des champs de type input texte.
  
  Différents types de champ
  
  03:08
- En attendant que l'ensemble des userAgent permettent de vérifier la bonne tenue de nos formulaires avant leur envoi, il est possible d'utiliser la librairie SPRY pour réaliser cette tâche.
  
  Les SPRY pour valider son formulaire
  
  06:15
De plus en plus, les sites déposés sur le web sont consultés depuis de nombreux types de plateformes. Apprenons dans ce chapitre à développer des sites qui puissent s'adapter à ce genre de situation.

Produire pour divers supports
- Nous allons voir ici qu'il est possible de destiner des feuilles de style à des supports d'affichage différents, qu'il s'agisse d'écran, d'impression, d'appareil portable, de braille, etc.
  
  Les différents modes de rendu
  
  05:23
- Pour définir l'utilisation des feuilles de style, nous pouvons utiliser les requêtes de médias.
  
  Les requêtes de médias et le panneau multi-écran
  
  04:58
- Après la théorie, passons maintenant à la pratique. Portons le site de Hypo Restaurenti vers une utilisation uniquement mobile et écran.
  
  Mise en place des différentes CSS
  
  08:23
- Une fois nos pages réactives, nous allons nous assurer que les contenus de type image par exemple puissent eux aussi être réactifs.
  
  Création de contenu réactif
  
  05:18
- Depuis l'apparition de @font-face, il est possible d'utiliser des polices qui ne seraient pas installées sur le système de l'internaute.
  
  Utilisation des polices web
  
  05:32
- Dreamweaver CS6 intègre maintenant toute la gestion de la déclaration @font-face. Nous allons donc au cours de cette étape créer une famille de polices.
  
  Création de familles de polices
  
  03:36
Dans les chapitres précédents, nous avons travaillé en local sur une machine de travail. Il est maintenant temps de placer ce contenu en ligne pour le rendre disponible aux internautes.

Optimisation et publication d'un site
- N'attendez pas d'avoir terminé le site avant de corriger les éventuelles fautes d'orthographe qu'il peut contenir.
  
  Correction orthographique
  
  02:04
- Nous verrons ici que l'outil Rechercher et remplacer de Dreamweaver devient très vite incontournable.
  
  Outil Rechercher et remplacer
  
  09:25
- Il est très important de vérifier que tous les liens du site pointent vers une page existante pour ne pas envoyer les internautes vers une erreur 404. De même, il est utile de vérifier les pages orphelines du site.
  
  Vérifier les liens et les pages orphelines
  
  01:59
- Dreamweaver permet de se connecter directement sur un compte BrowserLab afin de tester et comparer le rendu des pages sur divers environnements de navigateurs et de systèmes.
  
  Tester sur BrowserLab
  
  04:12
- Le site est presque terminé. Il ne nous reste plus qu'à commencer les tests en ligne et à y inviter les premiers internautes bêta-testeurs.
  
  Paramètres FTP et Dreamweaver
  
  05:52
- Une fois le site local et le site distant connectés, il nous faut transférer les fichiers. Nous allons voir que Dreamweaver nous propose de voiler certains documents puis de synchroniser les fichiers.
  
  Voiler et synchroniser
  
  08:18
- Lorsque nous travaillons en équipe, il est bon de savoir qui travaille sur tel ou tel fichier afin de ne pas écraser les travaux en cours. Dreamweaver propose à cette fin le travail en mode Archivage et extraction.
  
  Archivage et extraction de fichiers
  
  06:39
L'outil Dreamweaver est tellement complet et polyvalent qu'on ne peut pas l'épuiser en une seule formation ! Après la prise en main, voici maintenant quelques pistes pour aller plus loin.

Pour approfondir
- Afin de garder une bonne lisibilité et un bon équilibre dans des interfaces qui se veulent de plus en plus liquides, il est bon d'adopter la création d'interface en s'appuyant sur un mode Grille.
  
  Travailler en mode Grille
  
  04:08
- Il existe deux manières de publier du contenu à destination de diverses plateformes : soit en utilisant les Media Queries soit en ayant recours aux frameworks de grille liquide qui vont utiliser JavaScript pour réaliser cette bascule.
  
  Utiliser Less Framework
  
  06:04
- Si les fonctionnalités que l'on souhaite apporter à nos pages ne sont pas accessibles depuis l'interface de Dreamweaver, il faut consulter le navigateur de widgets qui regorge de fonctionnalités.
  
  Panneau des widgets
  
  09:41
- En complément des fonctionnalités comme les transitions CSS, l'inspecteur de widgets ou encore les librairies SPRY, Dreamweaver nous propose une palette Comportements fort utile.
  
  Comportements de base
  
  04:58
- Si Dreamweaver ne vous apporte pas la fonctionnalité recherchée, regardez du côté de la plateforme d'échange d'Adobe. Vous y trouverez un grand nombre de fonctionnalités très intéressantes et bien souvent gratuites.
  
  Ajout d'extensions Dreamweaver
  
  04:47
- Cette formation est terminée. Découvrons ensemble quelques liens d'aide, de tutoriaux et ressources diverses sur Dreamweaver pour continuer à découvrir et à échanger sur ce logiciel.
  
  Aide en ligne et ressources
  
  02:26