10 astuces Dreamweaver utiles pour les débutants

Un utilisateur de Dreamweaver déterminera sans aucun doute à quel point il est puissant. Rempli de tonnes de fonctionnalités, d'options et, sans aucun doute, l'un des environnements de développement intégrés les plus connus sur le marché actuel. Il se peut que Dreamweaver ne fournisse pas une gamme décente d’outils de développement, de collaboration et de codage. Ces options et outils sont cachés sous des couches de menus moins intuitifs et regrettables. C'est pourquoi nous proposons des tutoriels dans l'article d'aujourd'hui..

Nous vous montrerons certaines des fonctions les plus puissantes de Dreamweaver pour vous aider à y accéder rapidement, ainsi que de nombreuses autres astuces utiles qui vous permettront de gagner du temps de développement et d’améliorer considérablement la qualité de votre code. Liste complète après le saut.

1. Vue dynamique avec “Vue en direct”

Nous savons déjà que DW offre une vue statique de nos fichiers ouverts, mais qu'en est-il "vues dynamiques" d'une application telle que WordPress?

Tout d'abord, nous devons dire DW quels paramètres utiliser pour présenter notre"vues dynamiques" correctement. Pour ce faire, sélectionnez Paramètres de demande HTTP du Affichage> Options d'affichage en direct menu, puis entrez le OBTENIR ou POSTER paramètres dont vous avez besoin pour afficher votre application correctement.

Puis en passant à Vue en direct dans DW, il remplace l'ancien Vue de conception volet avec un rendu en direct et parfait de votre page par WebKit; complète avec Javascript en direct, manipulations DOM, requêtes de base de données, code côté serveur et CSS restitué, plutôt que les icônes d'espace réservé que vous voyez dans Vue de conception.

2. "Code Navigator" est le Firebug de DW

Aller plus loin est tout au sujet de la Navigateur de code et quand dans le Vue en direct Cliquez sur la touche ALT (Commande-Option-clic pour Mac) n’importe où dans la fenêtre pour afficher instantanément le code qui a restitué cet élément. Semblable à ce que vous pourriez voir actuellement dans Firefox / Firebug.

3. Gel de JavaScript

En raison de la nature dynamique d'Ajax, nous avons souvent besoin d'interagir avec une page où certains éléments ne sont pas rendus ou disponibles lors du chargement de la première page. Ce sont des éléments qui sont injectés dans la page peu de temps après le chargement de la page. Voici un exemple:

Vous voudrez peut-être modifier le style d'une info-bulle entièrement implémentée en JavaScript. Avant aujourd'hui, il vous faudrait chercher méthodiquement dans vos scripts pour trouver ce qui était créé et où..

Au lieu de cela, essayez ceci:

Rendez votre page en Vue en direct, puis frappé F6 geler JavaScript à tout moment, ce qui vous permet de cibler et de disséquer le code relatif à tout élément dynamique de la page.

4. Prochain meilleur ami de Live View - "Code Live"

Lors de l'utilisation Vue en direct, vous pouvez aussi allumer Code Live. Code Live mettra à jour votre code lorsque vous survolez, cliquez et interagissez avec des éléments et des éléments du Fenêtre Live View!

5. Achèvement automatique de JavaScript

Dreamweaver est livré avec une complétion intelligente et complète du code HTML et CSS, mais qu'en est-il des Javascripts? Si vous codez jQuery ou Prototype dans Dreamweaver, vous devez savoir qu'il existe des extensions d'API permettant de compléter le code Javascript. Il réduit la dactylographie nécessaire et peut s'avérer très pratique pour les codeurs rapides.

Cliquez ici pour en savoir plus ou téléchargez:

• Extension de l'API jQuery pour Dreamweaver
• Extension de l'API prototype pour Dreamweaver

6. Embellir les codes à la volée

Votre page de code ressemble-t-elle à des lignes de code désordonnées et non organisées? Utilisez le Appliquer le formatage source et reformatez-le exactement selon vos préférences. Pour les nettoyer rapidement, cliquez sur le bouton Format du code source icône au bas de la Barre d'outils de codage (Édition> Barres d'outils> Codage) et sélectionnez Paramètres de format de code définir votre formatage préféré.

Vous pouvez également accéder à l'option de formatage à partir de Commandes> Appliquer le formatage source ou seulement l'appliquer à un bloc de code sélectionné en sélectionnant le Appliquer le formatage source à la sélection option.

7. Obtenez widgety

Il suffit de cliquer sur le Icône Étendre Dreamweaver (cela ressemble à un engrenage) dans votre barre d’applications et sélectionnez Rechercher des widgets Web. Cela vous mènera à Adobe Exchange où vous pouvez trouver des widgets supplémentaires de fournisseurs tels que Yahoo !, JQuery et bien d'autres..

8. Subversion et Dreamweaver

Et oui, Dreamweaver prend en charge Subversion (SVN). Pour les développeurs qui utilisent SVN pour garder le contrôle de révision de leur projet, cela pourrait être une bonne nouvelle. Andrew Voltmer, développeur de Dreamweaver, discute de comment utiliser Subversions avec Dreamweaver.

9. Plus de styles redondants

Dreamweaver est souvent utilisé pour mettre à jour le contenu de manière visuelle, comme un traitement de texte. Avant Dreamweaver CS4, des règles CSS redondantes telles que .classe1, .classe2, etc. Dans Dreamweaver CS4, il suffit de changer votre Inspecteur de propriété à HTML mode (cliquez sur l'icône HTML à gauche de l'inspecteur) et vous ferez vos adieux à tout ce CSS redondant, en insérant uniquement le balisage HTML approprié.

10. La validation du formulaire rendue facile

Vous souhaitez valider vos champs de formulaire, mais vous craignez de devoir reconstruire à partir de zéro? Pas de soucis. Sélectionnez simplement un élément de formulaire existant, tel qu'un champ de texte, et appliquez un Widget Validation Spry du Insérer> Menu Spry. Ensuite, contrôlez les exigences de validation telles que les caractères minimum ou maximum directement à partir du Inspecteur immobilier.

Bonus: 3 de plus

11. Accéder facilement aux fichiers associés

Lorsque vous ouvrez un fichier HTML ou PHP, vous verrez maintenant une rangée de noms de fichiers dépendants, tels que CSS, Javascript et même les fichiers inclus pour PHP, en haut de la fenêtre du document. Vous pouvez facilement basculer sur ces fichiers, y apporter des modifications et les enregistrer, sans même les ouvrir. Lorsque vous cliquez sur un fichier dans la barre Fichiers associés, vous voyez sa source en mode Code et la page parent en mode Création. Ou utilisez Code Navigator pour accéder rapidement au code source CSS qui affecte votre sélection actuelle.

12. Vérifier la compatibilité des navigateurs

Ouvrez le document que vous souhaitez vérifier pour la compatibilité; dans la même barre de menus où les vues Code / Séparer / Créer sont accessibles, regardez à l'extrême droite pour 'Vérifier la page' bouton.

En cliquant dessus, vous développez un menu déroulant, sélectionnez 'Vérifier la compatibilité du navigateur'. le Fenêtre de résultats de compatibilité du navigateur montrera au bas de la fenêtre avec tous les problèmes que vous devez résoudre.

Remarque: cela NE vérifiera PAS les nouvelles versions d'IE sur Mac! Pour sélectionner les navigateurs à utiliser pour les tests, sélectionnez Vérifier la page > Réglages du menu.

13. Aperçu des pages PHP

Dreamweaver vous permet d'exécuter et de prévisualiser les codes PHP dans le logiciel. Voici comment le configurer.

Commencer

1. Tout d'abord, sélectionnez Site -> Nouveau site de la navigation du haut.
2. Vous verrez les deux De base et Définition de site avancée onglets d'option. Continuons en sélectionnant le Onglet Définition avancée du site.
3. Entrez un nom de dossier pour le site dans la case appropriée (pour cet exemple, nous utiliserons "myphp" comme nom de dossier).
4. Créez un autre dossier nommé "images" en entrant son nom dans le champ "Dossier d'images par défaut"..
5. Sous le Infos locales, saisissez les valeurs suivantes dans les champs:
   • Nom du site: le nom du site. À utiliser uniquement dans Dreamweaver
   • Dossier racine local: Il s’agit du nom du site sur lequel vous allez travailler. Assurez-vous de nommer les sites de manière à minimiser les conflits ou les noms confus..
   • Dossier Images par défaut: Ceci est facultatif, mais il est conseillé de le créer maintenant car la plupart des sites utiliseront des images dans une certaine mesure. C’est là que DW cherchera à insérer des images dans vos documents pendant la phase de codage..
   • Liens relatifs àRemarque: Cela définit la manière dont les liens de documents dans Dreamweaver seront gérés. Vous pouvez sélectionner Document ou Racine. Les différences entre les deux sont les suivantes:
     • Document Relative - Insérera un chemin relatif au fichier sur lequel vous travaillez et à l'élément lié..
     • Relatif racine - Utilise / qui provoque la liaison du document / fichier par rapport au dossier ROOT.
     • Une autre alternative consiste à ajouter une configuration aux fichiers de configuration du serveur. Étant une tâche plus avancée, nous allons simplement nous en tenir à l'utilisation de Document-relative pour l'instant..
   • Adresse HTTP: entrez le dossier racine du site pour votre projet
   • Liens sensibles à la casseDreamweaver vérifie si un fichier du projet peut avoir un problème sensible à la casse lors du téléchargement sur le serveur. Les notifications s'afficheront lorsque vous utiliserez: Site -> Vérifier les liens dans tout le site. Vous pouvez le laisser coché si vous voulez. Personnellement, je ne le laisse pas coché, car je nomme toujours les fichiers en minuscule. Les lettres majuscules ne sont pas recommandées.
   • Cache: Cocher Activer le cache.
6. dans le Info à distance page, configurez votre accès FTP ou un autre accès à un serveur distant ou laissez l’accès à aucun.
7. dans le Serveur de test sélectionnez l’option qui correspond au type de fichier / système que vous allez tester.
8. Contrôle de version ne sera pas utilisé pour cet exemple, vous pouvez donc le laisser en blanc à moins de le connaître.
9. Le camouflage vous permet de placer des fichiers .psd, .fla et autres fichiers sources dans le dossier de votre site. DW ne les prend pas en compte lors du téléchargement / de la mise à jour de votre site..
10. Notes de conception sont idéales pour une équipe de conception Web, car elles conservent une note sur les modifications apportées aux fichiers. C'est vérifié par défaut et c'est bien pour nous d'utiliser cette façon.
11. Laisser Colonne de vue de fichier, Contribuer, et Modèles par défaut.
12. le Alerte page pointe simplement sur le dossier des actifs Spry, qui est automatiquement inclus dans Dreamweaver. Il n'y a pas besoin de changer cela. Une fois tous les réglages terminés, cliquez sur D'accord.

Prévisualiser PHP dans Dreamweaver

Ouvrez maintenant un fichier PHP et apportez les modifications nécessaires. Pour afficher ce fichier dans Dreamweaver simplement appuyez sur F12 et les résultats apparaîtront dans votre navigateur par défaut. Vous pouvez changer le navigateur utilisé dans modifier -> Préférences -> Aperçu dans le navigateur. Cela permet un temps d'édition / prévisualisation plus rapide, évite d'avoir à taper des URL longues dans la barre de navigateur ou à utiliser un autre logiciel serveur pour restituer les fichiers PHP, ce qui permet de gagner du temps.!

C'est tout. Bonne Dreamweaver'ing :-)

Note de l'éditeur: Cet article est écrit par Jesse Matlock pour Hongkiat.com. Au cours des 6 dernières années, Jesse s'est immergé dans la conception d'interface utilisateur, le développement d'applications et les tendances Web. Il est le fondateur et le responsable de la conception d'une petite équipe de développement très talentueuse qui se concentre sur le développement d'applications sur mesure..