Adobe Dreamweaver CC

Création de contenus HTML, CSS, jQuery et PHP 5.4

(Lecture : 15 min)

Création de contenus HTML, CSS, jQuery et PHP 5.4

15 min

La prise en charge de HTML5, CSS3, jQuery et PHP 5.4 vous aide à créer des projets statiques, dynamiques, mobiles ou réactifs.

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour s'entraîner (ZIP, 21 Mo)

Télécharger le PDF Feuille de référence Dreamweaver

Dreamweaver CC vous permet de créer des pages HTML5 parfaitement structurées, mais aussi de tester et prévisualiser votre contenu directement dans l'interface, comme vous le feriez dans un navigateur externe.

Dreamweaver permet de concevoir des sites à l'aide de code conforme aux standards web, tout en limitant la programmation manuelle. Les fonctionnalités utilisent ou prennent en charge diverses technologies ouvertes, dont HTML5, CSS3, jQuery, PHP 5.4 et CEF (Chromium Embedded Framework), pour aider les professionnels du web à développer, tester et publier des contenus dynamiques et réactifs pour le web et les terminaux mobiles.

Remarque : téléchargez les fichiers fournis et testez ces fonctionnalités par vous-même. Vous pouvez utiliser les fichiers HTML, vidéo et d'image fournis pour mettre en pratique la plupart des concepts décrits dans cet article.

Structuration de pages avec des éléments HTML5

Lorsque vous créez des pages HTML, Dreamweaver CC propose par défaut le type de document HTML5. Le menu et le panneau Insertion incluent diverses balises HTML5, notamment des balises latérales, de section, d'article, d'en-tête et de pied de page, servant à structurer le contenu de votre document (voir Figure 1). Les éléments HTML5 permettent de concevoir des sites web plus accessibles, faciles à gérer et compatibles avec la plupart des navigateurs.

Figure 1. Composition web structurée à l'aide des éléments HTML5.
Figure 1. Cette composition web a été structurée à l'aide des éléments HTML5.

Remarque : consultez le didacticiel en six parties de David Power intitulé Creating your first website (Conception de votre premier site web) pour savoir comment créer un site web à l'aide des derniers éléments HTML5.

Prévisualisation et test de contenus web en mode En direct

Dreamweaver CC inclut plusieurs modes d'affichage pour la création et la prévisualisation de vos contenus web. Le mode Création offre une interface visuelle permettant d'ajouter des éléments et de définir leurs propriétés. Le mode Code sert à afficher et modifier directement le code HTML des pages que vous créez, tandis que le mode de création en direct vous permet de modifier et d'afficher un aperçu de vos créations sans quitter Dreamweaver.

Dreamweaver CC affiche le contenu web et l'exécute directement en mode En direct, ce qui vous permet de contrôler l'apparence et le comportement de votre site avant de le publier. Vous pouvez ainsi passer plus de temps dans l'espace de travail de Dreamweaver CC et n'avez pas besoin de passer dans un navigateur pour tester vos projets. Le mode En direct offre les mêmes performances et la même prise en charge de la technologie HTML5 que Google Chrome, ce qui garantit des prévisualisations fidèles. Pour plus d'informations sur cette technologie, consultez l'article Chromium Embedded Framework sur le blogue de l'équipe Adobe Web Platform.

Remarque : pour savoir comment tirer pleinement parti du mode En direct, suivez le didacticiel intitulé Modification et prévisualisation de pages web en mode de création en direct dans Dreamweaver.

Rendu d'éléments HTML5

Le mode En direct assure désormais un rendu plus précis des éléments. Par exemple, comparez les deux exemples de la Figure 2 pour voir comment un élément div doté d'un rayon de bordure et d'un dégradé répétitif est rendu dans Dreamweaver versions CS6 et antérieures, et comment il est rendu dans Dreamweaver CC. À gauche, la version précédente du mode En direct ne gère pas le rendu du rayon de la bordure. À droite, le nouveau mode En direct restitue le rayon de la bordure associé à la balise div comme les navigateurs modernes.

Figure 2. Rendu en mode En direct d'éléments auxquels sont associés des paramètres de rayon de bordure et des dégradés répétitifs dans Dreamweaver CS6 (gauche) et Dreamweaver CC (droite).
Figure 2. Le mode En direct opère désormais un rendu précis des éléments auxquels sont associés des paramètres de rayon de bordure et des dégradés répétitifs.

Prévisualisation des éléments de forme HTML5 et modules externes

Vous pouvez désormais tester le comportement des formes et des éléments directement en mode En direct. Lors de la prévisualisation d'éléments HTML5 tels que des menus contextuels ou des interfaces de calendrier directement en mode En direct, ces éléments se comportent de la même façon que dans un navigateur externe compatible HTML5 (voir Figure 3).

Remarque : les fichiers fournis incluent une forme que vous pouvez utiliser pour tester le comportement des divers éléments directement en mode En direct.

Figure 3. Les éléments de forme HTML5 s'exécutent correctement en mode En direct.
Figure 3. Les éléments de forme HTML5 s'exécutent correctement en mode En direct.

Prévisualisation de médias HTML5 grâce à une meilleure prise en charge des codecs

Le mode En direct de Dreamweaver CC prenant en charge un plus grand nombre de codecs, vous pouvez visionner des fichiers vidéo et écouter des fichiers audio au format HTML5 tout en testant des pages en mode En direct. Vous pouvez désormais prévisualiser du contenu multimédia dans l'espace de travail de Dreamweaver, sans avoir à lancer un navigateur à chaque fois que vous voulez tester une vidéo ou un fichier audio. Le contenu utilisant les codecs vidéo et audio indiqués dans le tableau 1 peut être lu en mode En direct.

Vidéo Audio
Theora
MP3
H 264 AAC
  Vorbis
  pcm_u8
  pcm_s16le
  pcm_s24le
  pcm_f32le
  pcm_s16be
  pcm_s24be

Inspection des éléments HTML

Le mode Inspection de Dreamweaver CC permet de modifier rapidement les éléments d'une page. Activez le mode Inspection, puis survolez un élément pour afficher ses propriétés, notamment sa largeur et sa hauteur, ainsi que les classes et ID appliqués. Le processus d'inspection du code dans l'espace de travail de Dreamweaver est identique à celui de Google Chrome.

Autrement dit, vous pouvez obtenir directement un retour visuel sans avoir à rechercher les valeurs de propriété. Procédez comme suit pour essayer cette fonction par vous-même :

  1. Lancez Dreamweaver CC.

  2. Ouvrez ou créez une page web.

  3. Activez le mode En direct en cliquant sur le bouton En direct, puis cliquez sur Inspecter.

  4. Survolez un élément pour afficher ses propriétés. Les règles s'affichent, ainsi que les valeurs des propriétés de marge, de marge intérieure et de bordure de l'élément survolé (voir Figure 4).

    Figure 4. Survolez des éléments pour afficher les valeurs des propriétés associées.
    Figure 4. Survolez des éléments pour afficher les valeurs des propriétés associées.

    Si vous utilisez régulièrement Google Chrome pour inspecter des éléments, vous maîtriserez en un rien de temps l'inspection des éléments dans Dreamweaver CC (voir Figure 5).

Figure 5. Inspection d'éléments dans Dreamweaver CC
Figure 5. Inspectez les éléments d'une page et actualisez les propriétés sans avoir à explorer le code source.

Remarque : pour tester vos projets plus efficacement et vérifier l'affichage des propriétés CSS et des éléments HTML5, veillez à utiliser les dernières versions de navigateur disponibles.

Application de styles CSS3

L'outil CSS Designer vous permet de définir visuellement des styles, fichiers et requêtes multimédias CSS3, mais aussi d'appliquer des propriétés CSS3 aux éléments de votre page.

Définition et repérage des sources CSS

Le panneau Sources en haut de CSS Designer propose trois types de source CSS à associer à votre page. Vous pouvez créer un fichier CSS, associer un fichier existant ou définir la feuille de style CSS de votre page web (voir Figure 6). Chacune des sources est répertoriée dans ce panneau. Sélectionnez la source appropriée lorsque vous devez modifier la feuille de style CSS.

Figure 6. Le panneau Sources de CSS Designer.
Figure 6. Le panneau Sources de CSS Designer.

Visualisation des relations entre les éléments HTML et les sélecteurs CSS

Lorsque vous sélectionnez des éléments en mode En direct, les sélecteurs CSS correspondants sont mis en évidence afin que vous puissiez voir la relation entre les éléments HTML et les règles CSS appliquées. Survolez et cliquez sur les sélecteurs dans CSS Designer pour mettre en évidence et inspecter les éléments (voir Figure 7). Vous pouvez ensuite sélectionner un élément et apporter des modifications ou mettre à jour des options via l'un des différents panneaux (au lieu de devoir faire défiler l'affichage en mode Code pour effectuer une modification).

Figure 7. Un sélecteur dans CSS Designer et son élément HTML mis en évidence
Figure 7. Cliquez sur un sélecteur dans CSS Designer pour mettre en évidence l'élément HTML auquel il est associé.

Dans Dreamweaver CC, lorsque vous cliquez sur un sélecteur du panneau Sélecteurs et passez en mode Code, la section du code CSS correspondante s'affiche. Vous pouvez modifier les propriétés du sélecteur directement dans le code ou à partir du panneau Propriétés de CSS Designer. Vous pouvez également survoler le nom d'un sélecteur dans le panneau Sélecteurs de CSS Designer pour afficher l'info-bulle contenant des détails sur ce sélecteur (voir Figure 8).

Figure 8. Une info-bulle dans CSS Designer affichant les propriétés CSS d'un sélecteur, tandis que les sélections correspondantes sont mises en évidence en mode Code et mode En direct.
Figure 8. Survolez un sélecteur dans CSS Designer pour afficher une info-bulle contenant ses propriétés CSS. Les sélections correspondantes sont alors mises en évidence dans les modes Code et En direct.

Modifications visuelles à l'aide du panneau Propriétés

Vous pouvez utiliser conjointement le panneau Propriétés de CSS Designer et le mode En direct pour modifier les propriétés CSS d'un élément et prévisualiser le résultat.

Par exemple, vous pouvez sélectionner le conteneur vidéo dans les fichiers de projet fournis (voir Figure 9) et modifier les propriétés d'ombre portée à votre convenance.

 

Figure 9. Utilisation du panneau Propriétés de CSS Designer en mode En direct pour modifier les styles CSS et prévisualiser le résultat.
Figure 9. Utilisez le panneau Propriétés de CSS Designer et activez le mode En direct pour modifier les styles CSS et prévisualiser le résultat.

Extension de sites et d'applications mobiles avec les widgets jQuery

Les widgets jQuery sont de petites applications web que vous pouvez utiliser pour enrichir les fonctionnalités et la mise en forme de vos contenus web. jQuery est une bibliothèque JavaScript prise en charge en mode natif par la plupart des navigateurs. Les widgets jQuery ont remplacé le framework Spry, une pile technologique d'Adobe pour l'ajout d'éléments (accordéons, sélecteurs de date, boutons, onglets, etc.) dans les contenus web dynamiques.

Le panneau et le menu Insertion proposent deux catégories de widgets jQuery (voir Figure 10).

  • Interface utilisateur jQuery – Accordéons, onglets, barre de progression, boutons, etc. enrichissant les fonctionnalités de vos contenus web.
  • jQuery Mobile – Pages, listes, blocs réductibles, mots de passe, etc. adaptés aux projets de développement d'applications mobiles.

 

Figure 10. Les widgets Interface utilisateur jQuery et jQuery Mobile sont disponibles dans le panneau et le menu Insertion.
Figure 10. Les widgets Interface utilisateur jQuery et jQuery Mobile disponibles dans le panneau et le menu Insertion.
Figure 10. Les widgets Interface utilisateur jQuery et jQuery Mobile sont disponibles dans le panneau et le menu Insertion.

Utilisation des widgets Interface utilisateur jQuery

Pour tester les widgets Interface utilisateur jQuery dans votre page, consultez le didacticiel Using jQuery widgets in web pages in Dreamweaver (Utilisation des widgets jQuery dans des pages web avec Dreamweaver). Les fichiers de projet fournis avec cet article incluent aussi un fichier jquery.html que vous pouvez utiliser pour suivre les didacticiels.

jQuery Mobile

Pour savoir comment utiliser les widgets jQuery Mobile dans vos projets mobiles, suivez les didacticiels ci-dessous et téléchargez les fichiers de projet associés.

 

Développement avec PHP 5.4

Dreamweaver CC prend en charge PHP 5.4, ce qui vous permet d'accéder aux comportements serveur PHP lors du développement de sites avec système de gestion de contenu (CMS), notamment les sites WordPress et Drupal.

Après avoir configuré un serveur web local donnant accès aux pages PHP de votre site et utilisable avec Dreamweaver, vous pouvez développer et tester les sites web dynamiques en local avant de les publier. Le mode Code de Dreamweaver CC gère les indications de code pour la syntaxe PHP 5.4.

Pour savoir comment configurer un serveur local utilisable avec Dreamweaver, visionnez la vidéo de Paul Trani intitulée How to Set up WordPress in Dreamweaver. Kristin Long, de MIGHTYminnow, propose également un screencast sur le développement de sites CMS dynamiques dans Dreamweaver.

 

Pour aller plus loin

Pour prendre connaissance des prochaines mises à niveau de Dreamweaver, consultez le blogue de l'équipe Adobe Dreamweaver. Téléchargez dès maintenant Dreamweaver CC pour tirer parti de ces nouvelles fonctionnalités et créer facilement du contenu web expressif.

Donnez-nous votre avis.

Et voilà, vous avez terminé ! Donnez-nous votre avis sur ce didacticiel en répondant à notre enquête.


preran-kumar-83x83

Preran Kumar

Preran Kumar est responsable du support social pour les produits web chez Adobe. Il interagit avec les clients sur divers réseaux sociaux pour les aider à résoudre leurs problèmes techniques. Au cours de sa carrière, Preran Kumar a travaillé dans de nombreux domaines, de l'élaboration de cosmétiques à la conception web en passant par le conditionnement de biens de consommation.