Utilisation d'Adobe Device Central avec Dreamweaver

Device Central permet aux concepteurs et développeurs Web travaillant sur Dreamweaver de prévisualiser des fichiers Dreamweaver sur de nombreux périphériques mobiles. Device Central utilise la fonction Small-Screen Rendering™ d'Opera pour permettre aux concepteurs et aux développeurs de voir à quoi ressemblera leur page Web sur un petit écran. Les concepteurs et les développeurs peuvent aussi tester le comportement de leurs fichiers en format CSS.

Par exemple, un développeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les téléphones portables. Le développeur Web peut utiliser Dreamweaver pour créer des pages préliminaires et Device Central pour tester l'affichage de ces pages sur différents périphériques.

  1. Lancez Dreamweaver.
  2. Ouvrez un fichier.
  3. Effectuez l’une des opérations suivantes :
    • Sélectionnez Fichier > Aperçu dans le navigateur > Device Central.

    • Dans la barre d’outils de la fenêtre du document, cliquez et maintenez enfoncé le bouton du navigateur Aperçu/Débogage dans le navigateur  et sélectionnez Aperçu dans Device Central.

Conseils pour la création de contenu Web Dreamweaver pour les périphériques mobiles

Device Central permet d’afficher des pages Web créées dans Dreamweaver à l’aide de la fonction Small-Screen Rendering d’Opera. Cette prévisualisation peut vous donner une très bonne idée de ce à quoi ressemblera une page Web sur un périphérique mobile.

Remarque : la fonction Small-Screen Rendering d’Opera peut être ou ne pas être pré-installée sur les périphériques virtuels. Device Central donne simplement un aperçu de ce à quoi ressemblerait le contenu si la fonction Small-Screen Rendering d’Opera était installée.

Suivez les conseils ci-dessous pour vous assurer que les pages Web créées dans Dreamweaver s’affichent correctement sur les périphériques mobiles.

  • Si vous utilisez la structure Adobe® Spry pour développer un contenu, ajoutez la ligne HTML suivante à vos pages afin qu’elles s’affichent en CSS et exécutent les fonctions JavaScript™ correctement dans Device Central : <link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

  • La fonction Small-Screen Rendering d’Opera ne prend pas en charge les cadres, les listes déroulantes, les soulignements, les caractères barrés, les légendes, les clignotements ni les rectangles de sélection. Essayez d’éviter de dessiner ces éléments.

  • Faites que les pages Web pour périphériques mobiles restent simples. En particulier, utilisez un nombre limité de polices, tailles et couleurs de polices.

  • La réduction de la taille des images et la réduction du nombre de couleurs permettent d’augmenter les chances que les images ressemblent à ce qui était prévu. Utilisez les formats CSS ou HTML pour spécifier la largeur et la hauteur exactes pour chaque image utilisée. Indiquez du texte de remplacement pour toutes les images.

Remarque :

vous trouverez de très nombreuses informations sur l’optimisation des pages Web pour les périphériques mobiles sur le site Web du logiciel Opera.

Pour d’autres conseils et de plus amples informations sur les techniques de création de contenu pour les téléphones et périphériques mobiles, consultez la page www.adobe.com/go/learn_cs_mobilewiki_fr.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne