1. Analyse de fond
Pour les producteurs de pages Web professionnels qui souhaitent créer des pages Web complexes dans un environnement visuel, Dreamweaver s'est progressivement imposé comme un outil d'édition de pages Web et est devenu le meilleur choix pour les professionnels qui rédigent des pages Web. Selon une enquête de Macromedia, Dreamweaver compte actuellement plus de 700 000 utilisateurs, ce qui le place au premier rang des outils d'édition Web en termes de part de marché, laissant loin derrière ses concurrents tels que « Adobe GoLive » et « NetObjects Fusion ». Par conséquent, on s’attend généralement à ce que le nombre d’utilisateurs de Dreamweaver continue d’augmenter.
Face à ce taux de popularité écrasant, il est concevable que les fonctions intégrées de Dreamweaver deviennent de plus en plus abondantes, riches et complètes. Cette fois, dans notre introduction, de nouvelles fonctionnalités offrent aux créateurs de pages Web une conception plus rapide, un codage plus facile et des fonctions plus intégrées. Sans plus tarder, nous présentons ici comment faire bon usage de certaines fonctions de Dreamweaver. Vous trouverez ci-dessous douze techniques secrètes, qui peuvent être divisées en quatre thèmes. Il s'agit de : concevoir des pages Web (Dreamweaver dispose de fonctions de conception de pages flexibles), utiliser Dreamweaver avec d'autres produits Macromedia (créer des animations et des images sans demander d'aide), personnaliser l'interface utilisateur (profiter d'une expérience utilisateur personnalisée) et enfin rejoindre Dreamweaver Extensions ( charger des fonctionnalités avancées étendues dans des pages Web).
2. Conseils pour la conception de pages Web
Que vous souhaitiez utiliser la syntaxe HTML originale pour écrire des pages Web mot pour mot ou utiliser des fenêtres standardisées pour la conception visuelle des pages Web, les conseils suivants peuvent s'avérer utiles.
Astuce 1 : Rendre la taille de la page Web plus flexible.
Certains développeurs Web appellent la technique présentée ci-dessous « liquide », mais ici ils l'appellent « technique d'extension élastique ». Il s'agit d'une technique qui ajuste la taille de la page Web lorsque la taille de la fenêtre du navigateur du visiteur change. Par conséquent, si la fenêtre est trop grande, il n'y aura pas d'espace vide si la fenêtre est trop petite, le mouvement de haut en bas. les barres n’apparaîtront pas sur les bords. En fait, la plupart des pages Web simples ajusteront automatiquement la taille de la page en fonction de la taille de la fenêtre du navigateur. Cependant, si de nombreux cadres et tableaux différents sont utilisés dans la page Web, il sera difficile d'ajuster automatiquement la taille de la page Web. ajusté de manière flexible. Habituellement, les concepteurs Web utilisent un mélange de cadres de largeur fixe et d'images GIF comme intervalles pour concevoir des pages Web. De cette manière, que ce soit avec Internet Explorer ou Netscape Navigator, la taille de la page sera fixe et ne s'enfuira pas. Avec Dreamweaver 4.0, vous pouvez facilement concevoir des pages Web qui s'ajusteront automatiquement de manière flexible. Comment faire ?
★Méthode spécifique : Utilisez le bouton de la palette d'outils (Palette Objet) pour ouvrir la page web et passer en "Vue Mise en page". À ce stade, vous pouvez voir la largeur de colonne de la zone de texte. Il y a une petite flèche déroulante au milieu de la zone au-dessus de chaque colonne, puis cliquez sur la petite flèche au-dessus de la colonne dans laquelle vous souhaitez définir l'affichage flexible. sélectionnez "Définir la colonne comme étendre automatiquement la colonne". (Définissez la largeur de colonne d'ajustement automatique pour qu'elle soit limitée à une colonne) À ce stade, une ligne ondulée apparaîtra au-dessus de la zone de colonne au lieu du numéro d'origine indiquant la largeur de colonne. Dreamweaver créera automatiquement une image vierge à mise en page fixe. Cette image vierge est représentée par deux longs tableaux vierges au-dessus de la colonne. De cette manière, la mise en page sera automatiquement remplie et le paramètre de mise en page flexible sera complété. (Lorsque vous ajoutez une image vierge pour la première fois, une boîte de dialogue apparaîtra vous demandant si vous souhaitez utiliser une image intégrée. Pour un effet optimal, nous vous recommandons de laisser Dreamweaver en générer une automatiquement, sinon vous ne le ferez pas. (vous devez utiliser une image vierge pour remplir la mise en page.)
Astuce 2 : Créer une palette personnelle
Le nouveau "panneau des ressources" de Dreamweaver (panneau de contrôle des propriétés) est un nouvel outil qui peut gérer les fichiers en fonction des formats de fichiers, tels que les images, les styles, etc. , lors de la modification d'un site Web.
★Méthode spécifique : Lorsque vous définissez un nouveau site (cliquez sur Site Nouveau site), tous les types d'objets seront automatiquement ajoutés aux zones de tableau appropriées dans le "Panneau Actifs". Ce nouveau panneau de contrôle de propriété « Panneau d'actifs » dispose également d'une zone de couleur, qui stocke toutes les couleurs utilisées dans votre site Web, y compris la couleur du texte, la couleur d'arrière-plan et la couleur des liens hypertexte. Il s'agit d'une palette de couleurs de navigation sur un site Web conçue pour les utilisateurs. Lancez simplement le « Panneau des actifs » (sélectionnez d'abord « Fenêtre » puis cliquez sur « Actifs »), puis cliquez sur le petit défilement de couleur sur la gauche et vous verrez une variété d'options de couleurs pour votre site Web. Bien sûr, vous pouvez appliquer ces couleurs à certains textes sélectionnés. Même lorsque vous sélectionnez une certaine couleur, la valeur hexadécimale de la densité des couleurs et les trois codes de contraste des couleurs primaires (RVB) apparaîtront à l'écran. Si vous souhaitez réduire la barre d'outils de la palette, vous pouvez même ajouter uniquement certaines couleurs aux « favoris » de la palette. Mettez simplement en surbrillance la couleur sélectionnée et cliquez sur le bouton « Ajouter aux favoris » dans la fenêtre (le bouton en bas à droite), et vous avez terminé.
Astuce 3 : Création d'un système de navigation par menu contextuel
À l'origine, la création d'un système de navigation par menu contextuel nécessitait beaucoup de syntaxe et de techniques JavaScript, mais si vous disposez de Dreamweaver et Fireworks Studio, vous pouvez le faire facilement et rapidement.
★Méthode spécifique : démarrez d'abord dans "Fireworks", sélectionnez une image, puis cliquez sur "Insérer un menu contextuel" dans la boîte de dialogue "Définir le menu contextuel". Vous pouvez saisir le nom des éléments (éléments) et cliquer. le bouton "Plus" pour ajouter l'élément. Vous pouvez continuer à effectuer des réglages détaillés dans la boîte d'informations qui apparaît, comme la définition du texte et des hyperliens à utiliser pour le projet. Bien entendu, vous pouvez également ajouter des sous-menus et réorganiser les paramètres pour le niveau suivant. Une fois terminé, cliquez sur « Suivant » pour continuer à définir diverses valeurs de paramètres, telles que la couleur, la police, etc. Une fois le menu terminé, vous pouvez prévisualiser la syntaxe HTML et les images. Cliquez à nouveau sur "Terminer". À ce moment-là, lorsque la souris se déplace vers l'image originale, une liste du contenu du système de menus apparaîtra. Ensuite, lorsque vous exporterez le fichier créé, « Fireworks » produira automatiquement tous les fichiers HTML, javascript et image dont Dreamweaver a besoin.
Astuce 4 : Faites bouger les images
Si Dreamweaver et Fireworks Studio sont installés en même temps, vous serez étonné par la combinaison parfaite de ces deux logiciels. Même si vous n'êtes pas un concepteur d'images professionnel, vous souhaiterez peut-être modifier certaines images GIF pour les rendre plus vivantes lors de la conception de pages Web. Dreamweaver vous permet de créer des animations sans demander d'aide.
★Méthode spécifique : Sélectionnez l'image à modifier dans la fenêtre standard, puis cliquez sur « Modifier » dans « Inspecteur des propriétés ». Si vous avez installé Dreamweaver avec « Fireworks » inclus, « Fireworks » est l'éditeur d'images par défaut de Dreamweaver et les images seront automatiquement chargées dans « Fireworks ». (Si vous regardez attentivement, vous constaterez que du texte et des graphiques tels que « Modification à partir de Dreamweaver » apparaîtront sur l'écran Fireworks, indiquant que vous pouvez modifier des images dans Dreamweaver.) Très bien, cliquez maintenant sur l'image que vous souhaitez modifier dans " Feux d'artifice", sélectionnez "Modifier la sélection animée". Ensuite, complétez les paramètres dans la "Boîte de dialogue Animer", sélectionnez le nombre d'images de l'animation, la direction du mouvement de l'animation, la transparence et d'autres paramètres. Vous pouvez également cliquer sur l'outil "Cadres" pour définir la vitesse de déplacement et sélectionner le panneau "Objet" pour modifier les paramètres. Lorsque vous souhaitez exporter un fichier, cliquez simplement sur la barre d'outils "Optimiser" et sélectionnez "GIF animé" dans le type de fichier. Une fois terminé, "Fireworks" exportera automatiquement l'image avec des paramètres optimisés, mettra automatiquement à jour l'image GIF et affichera l'image mise à jour dans Dreamweaver. Cliquez sur « Aperçu du fichier dans le navigateur » pour pouvoir prévisualiser la jolie image que vous venez de créer dans le navigateur.
Astuce 5 : Faites en sorte que le bouton ait un effet clignotant.
Dans Dreamweaver, vous pouvez créer un objet bouton Flash avec un effet clignotant sans avoir de Flash. Dreamweaver possède plusieurs objets boutons Flash intégrés, qui peuvent créer différentes formes de boutons.
★Méthode spécifique : cliquez sur "Insérer un bouton Flash d'images interactives" pour voir les boutons intégrés. Vous pouvez même utiliser la souris pour pointer sur le formulaire de bouton que vous souhaitez utiliser dans la boîte de dialogue, puis voir comment il fonctionne dans le navigateur. Utilisez le pointeur de la souris pour sélectionner le formulaire de bouton à utiliser, puis entrez les paramètres dans l'ordre, tels que le texte, la police, la couleur, le lien hypertexte, etc. sur le bouton ou un nom de fichier personnalisé. Appuyez sur OK. Ensuite, un fichier au format « SWF » sera généré et le fichier sera automatiquement importé dans votre page Web. Cliquez sur le fichier complété et vous verrez les propriétés du fichier affichées dans « l'Inspecteur des propriétés ». Lors de l'affichage des attributs de fichier, si vous développez la liste des attributs de fichier, « Lecture » apparaîtra. Après avoir cliqué, vous pourrez prévisualiser l'effet clignotant du bouton sans ouvrir le navigateur.
Astuce 6 : Créer un texte fluide
Ajouter du texte fluide à une page Web est aussi simple que d'ajouter le bouton Flash que nous venons de présenter. De même, sans installer Flash, vous pouvez facilement le faire grâce aux nouvelles fonctionnalités fournies par Dreamweaver. Les créateurs de pages Web qui utilisent couramment la syntaxe HTML pour écrire des pages Web et n'ont aucune expérience des médias interactifs peuvent facilement créer un texte fluide et compact sous forme de Flash. Cette nouvelle fonctionnalité peut ajouter une certaine interactivité de navigation aux pages Web sans ajouter de problèmes de compatibilité. ★Méthode spécifique : cliquez sur "Insérer le texte Flash des images interactives", puis remplissez les paramètres un par un (tels que le texte, le style de police, la couleur et la taille de la police dont vous souhaitez modifier l'effet, etc.).
Astuce 7 : Modifier les raccourcis clavier
Dreamweaver permet aux utilisateurs de personnaliser l'interface et cette conception est très flexible. Par exemple, les utilisateurs peuvent modifier le menu en écrivant des programmes ou en ajoutant eux-mêmes des objets. Vous n'avez pas besoin d'être un expert pour modifier les raccourcis clavier, car Dreamweaver dispose d'une interface graphique appelée « Éditeur de raccourcis clavier ».
★Méthode spécifique : cliquez simplement sur "Modifier les raccourcis clavier", et la boîte de dialogue chargera et listera les touches de raccourci qui peuvent être modifiées, vous permettant ainsi de modifier les touches de raccourci selon les paramètres auxquels vous êtes habitué. Pour modifier une touche de raccourci, utilisez simplement le menu déroulant de la barre Ensemble et commandes actuels, recherchez la commande que vous souhaitez modifier parmi les commandes existantes, puis sélectionnez la touche de raccourci actuelle, elle apparaîtra dans la liste des touches de raccourci. dans la liste. De plus, si vous souhaitez ajouter des paramètres de touche de raccourci, vous pouvez cliquer sur « Plus », saisir la nouvelle touche représentative du raccourci que vous souhaitez utiliser sur le clavier, puis cliquer sur « Modifier ». Dans le même temps, vous pouvez également sélectionner une touche de raccourci et cliquer sur « Moins » pour supprimer une touche de raccourci.
Astuce 8 : Réinitialisez la colonne de la fenêtre Site
★ Méthode spécifique : Cliquez simplement sur « Afficher les colonnes de la vue Fichier » dans la « Fenêtre du site » pour afficher la taille et l'apparence de la colonne de la vue Site. Sélectionnez un nom de champ et utilisez les flèches haut et bas pour le redimensionner, ou décochez Afficher le champ pour masquer le champ. De plus, vous pouvez également ajouter des colonnes et créer vos propres noms de colonnes en cliquant sur le bouton « Plus ». Alternativement, vous pouvez associer une colonne à une « Design Note » en sélectionnant une « note » existante dans le menu déroulant.
Astuce 9 : Visualisez le code original de la page Web
★ Méthode spécifique : Lorsque vous ouvrez « Reilly Code Reference » (Fenêtre de référence) pour vérifier les propriétés ou la compatibilité du navigateur, la fenêtre par défaut affichera « Paramètres de référence » en petites polices de valeur". Mais si vous appuyez sur le bouton droit dans le coin supérieur droit de la fenêtre (juste en dessous du bouton de fermeture), une rangée de menus déroulants apparaîtra dans lesquels vous pourrez sélectionner la taille de police du code d'origine (petite à moyenne et grande). Choisir des polices de grande taille est moins « abusif » pour les yeux car vous n'avez pas besoin de tenir une loupe pour regarder l'écran lors de la lecture du code HTML original.
Astuce 10 : ajouter un bouton Flash
Dans l'astuce 5, nous avons présenté comment utiliser 20 types de boutons prédéfinis pour créer des boutons Flash dans Dreamweaver. Il s'agit d'une méthode qui ne nécessite pas l'installation de fichiers ou de programmes supplémentaires. Il existe une autre méthode ci-dessous, qui consiste à installer des « boutons Fireworks ». Cette extension a le même effet que l'astuce 5.
★Méthode spécifique : accédez à "Exchange for Dreamweaver" (centre d'échange d'extensions Dreamweaver), saisissez le mot-clé de recherche "InstaGraphics Extensions for Dreamweaver", puis téléchargez ce fichier d'environ 577 Ko. Basculez vers Dreamweaver, sélectionnez « Commandes Gérer les extensions », puis sélectionnez « Extension d'installation de fichiers » pour démarrer l'installation. Une fois que vous aurez redémarré "Dreamweaver", il y aura six nouveaux formats de boutons intéressants, dont "Surfboard" et "Bulletbar". Pour le moment, utilisez simplement la commande "Insérer un bouton de feu d'artifice d'images interactives" pour créer un bouton sympa. Vous pouvez également utiliser les « commandes Convertir les puces en images » et les « Commandes Convertir le texte en images ». Les deux méthodes ci-dessus peuvent exécuter automatiquement « Fireworks ».
Astuce 11 : Ajoutez la fonction « Définir comme favoris » à la page Web ★ Méthode spécifique : Recherchez dans « Exchange » et vous pourrez trouver la fonction étendue « Ajouter aux favoris ». Ce petit fichier n'occupe que 3K, et le temps de téléchargement ne prendra pas trop de temps. Suivez ensuite les mêmes étapes pour le charger depuis le "Gestionnaire d'extensions" (Commandes Gérer les extensions, Extension d'installation de fichiers). Redémarrez ensuite Dreamweaver. Ce fichier d'extension nouvellement chargé ajoutera une nouvelle fonctionnalité à Dreamweaver. Si vous ajoutez cette fonction "Ajouter à ma collection" à votre page Web, alors lorsque l'utilisateur verra votre site Web, il pourra facilement ajouter votre site Web à "Ma collection" de son navigateur en un seul clic. De plus, le plus sympa c'est que vous pouvez également personnaliser le nom de "Mes Favoris" et la petite icône qui apparaîtra devant le nom de "Mes Favoris" (généralement la petite icône devant "Mes Favoris" dans IE est la valeur par défaut d'IE, si vous avez une petite icône conçue par vous-même, elle sera plus éblouissante). Notez que cette fonctionnalité ne prend en charge que les navigateurs utilisant IE 4.0 et versions ultérieures. Sélectionnez simplement le panneau « Comportement » dans le menu « Windows », puis accédez au menu déroulant de la fonction IE et cliquez sur cette fonction pour activer facilement cette fonctionnalité intéressante.
Astuce 12 : Des graphiques super sympas.
Si vous souhaitez créer un formulaire, devez-vous quand même passer du temps à écrire le code original de la page web textuellement ? Pas besoin, il en existe déjà un tout fait
★Méthode spécifique : Allez sur
!Échangez et téléchargez « l'extension Form Builder ». Il existe des tableaux prêts à l'emploi qui vous permettent de copier instantanément des tableaux comprenant : le pays, le sexe, l'état civil, la tranche d'âge et d'autres catégories. Accédez à Exchange pour télécharger ce petit fichier (seulement 11 Ko), puis installez-le via le « Gestionnaire d'extensions » (Commandes Gérer les extensions, Extension d'installation de fichiers). Ensuite, redémarrez simplement Dreamweaver, cliquez sur "Insérer FormBuilder" et vous trouverez la fonction étendue dans (Insérer FormBuilder). Après avoir cliqué, une boîte de dialogue apparaîtra, qui affichera tous les menus de format applicables, ce qui est vraiment pratique.