À en juger par la situation actuelle, les fonctions intégrées de Dreamweaver peuvent être considérées comme de plus en plus abondantes, riches et complètes. Ici, je voudrais vous présenter quelques conseils d'application dans la version 4.0.
1. Rendre les pages Web plus flexibles.
Certains développeurs Web appellent la technique présentée ci-dessous liquide, mais j'appelle ici cette technique extensible (technique d'extension flexible). Il s'agit d'une technique qui permet d'ajuster 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, et si la fenêtre est trop petite, le haut et le bas seront affichés. la barre mobile vers le bas n’apparaîtra pas sur le bord. 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 de colonne fixe et d'images GIF comme intervalles pour concevoir des pages Web. De cette manière, que vous utilisiez Internet Explorer ou Mac, 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'ajustent automatiquement et de manière flexible. Comment faire ?
Ouvrez la page Web à l'aide des boutons de la palette Objet et passez en mode 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. Sélectionnez la petite flèche au-dessus de la colonne dans laquelle vous souhaitez définir l'affichage flexible, et puis sélectionnez "Rendre l'affichage flexible de la colonne" (Make Column Autostretch). (Définissez l'ajustement automatique de la largeur des colonnes pour qu'il soit limité à une seule 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 la colonne. Dreamweaver créera automatiquement un fichier image vierge à mise en page fixe. Ce fichier image vierge est représenté par deux longs tableaux vierges au-dessus des colonnes. 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 un fichier image vierge pour la première fois, une boîte de dialogue apparaîtra vous demandant si vous souhaitez utiliser le fichier image intégré. Pour un effet optimal, je vous recommande de laisser Dreamweaver en générer un automatiquement, sinon vous vous n'avez pas besoin d'utiliser un fichier image vierge pour remplir la mise en page.)
2. Créez une palette de couleurs personnalisée
Le nouveau panneau Actifs de Dreamweaver 4.0 est un nouvel outil capable de gérer les fichiers en fonction de leurs types, tels que des images, des modèles, etc. ., lors de la modification d'un site Web. Lorsque vous définissez un nouveau site Web (Sélectionner un site · Nouveau site), tous les types de composants seront automatiquement ajoutés aux cases appropriées du panneau Actif. Ce nouveau panneau Actifs comporte également une zone de couleur dans le panneau de configuration des propriétés, qui stocke toutes les couleurs utilisées dans votre site Web, y compris les couleurs du texte, les couleurs d'arrière-plan et les couleurs des liens. Il s'agit d'une palette de couleurs orientée site Web et adaptée aux utilisateurs. Activez simplement le panneau Actifs (sélectionnez d’abord Fenêtre, puis Actifs), puis sélectionnez la petite barre de 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 couleur, la valeur hexadécimale de la couleur et le code tricolore correspondant (RVB) apparaîtront à l'écran. Si vous souhaitez réduire la barre d'outils de votre palette, vous pouvez même ajouter uniquement certaines couleurs aux Favoris de votre palette. Mettez simplement en surbrillance la couleur sélectionnée, sélectionnez un bouton appelé « Ajouter à mes favoris » dans la fenêtre (le bouton en bas à droite), et vous avez terminé.
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 des compétences en syntaxe JavaScript, mais si Dreamweaver/Fireworks Studio est installé, cela peut être fait rapidement. Commencez par démarrer Fireworks, sélectionnez une image, puis sélectionnez Insérer un menu contextuel dans la boîte de dialogue Définir le menu contextuel. Vous pouvez saisir le nom des éléments et sélectionner le bouton Plus pour ajouter le projet. Vous pouvez continuer à effectuer des réglages détaillés dans la boîte de message contextuelle, tels que la définition du texte et des liens à utiliser pour l'élément. Bien entendu, vous pouvez également ajouter des sous-menus et réorganiser les paramètres pour le niveau suivant. Une fois terminé, sélectionnez Suivant pour continuer à définir les préférences telles que les couleurs, les polices, etc. Une fois le menu terminé, vous pouvez prévisualiser la syntaxe HTML et prévisualiser l'image. Sélectionnez ensuite Terminer. A ce moment, lorsque la souris se déplace vers le motif d'origine, une liste du contenu du système de menus apparaîtra. Ensuite, lorsque vous exportez le fichier créé, Fireworks génère automatiquement tous les fichiers HTML, JavaScript et image dont Dreamweaver a besoin.
4. Faites bouger le fichier image !
Si Dreamweaver/Fireworks Studio est installé en même temps, vous serez étonné de la combinaison parfaite de ces deux produits. Même si vous n'êtes pas un graphiste professionnel, vous souhaitez quand même modifier certains fichiers image GIF pour les rendre plus vivants lors de la conception de pages Web. Dreamweaver vous permet de créer des animations sans rien demander à personne ! Sélectionnez l'image que vous souhaitez modifier dans la fenêtre standard, puis sélectionnez le bouton Modifier dans l'inspecteur des propriétés. Si Fireworks est inclus avec votre installation de Dreamweaver, 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 à partir de Dreamweaver.) Très bien, sélectionnez maintenant l'image à modifier dans Fireworks et sélectionnez Modifier · Animer · Animer la sélection. Ensuite, complétez les paramètres dans la boîte de dialogue Animer, sélectionnez le nombre d'images pour l'animation, la direction du mouvement de l'animation, la transparence, etc. Vous pouvez également sélectionner la barre d'outils Cadres pour définir la vitesse de déplacement et sélectionner le panneau Objet pour modifier les paramètres. Pour exporter le fichier, sélectionnez simplement la barre d'outils Optimiser et sélectionnez GIF animé comme type de fichier. Une fois terminé, Fireworks exportera automatiquement l'image avec des paramètres optimisés, mettra automatiquement à jour le fichier image GIF et affichera le fichier image mis à jour dans Dreamweaver. Sélectionnez Fichier·Aperçu dans le navigateur, afin de pouvoir prévisualiser la jolie image que vous venez de créer dans le navigateur !
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 programme Flash. La version 4.0 comporte plusieurs objets boutons Flash intégrés, qui peuvent créer plusieurs formes différentes de boutons. Sélectionnez Insérer · Images interactives · Bouton Flash pour voir quels boutons intégrés sont disponibles. 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 curseur de la souris pour sélectionner le formulaire de bouton que vous souhaitez utiliser, puis entrez les paramètres dans l'ordre, tels que le texte, la police, la couleur, le lien, etc. sur le bouton ou un nom de fichier personnalisé. Appuyez sur OK. Ensuite, un fichier SWF sera généré et automatiquement placé sur votre page Web. Cliquez sur le fichier terminé 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, un bouton Lecture apparaîtra. Après l'avoir sélectionné, vous pourrez prévisualiser l'effet clignotant du bouton sans ouvrir le navigateur.
6. Créez un texte fluide
Ajouter du texte fluide à une page Web est aussi simple que d'ajouter le bouton Flash que je viens de présenter. De même, vous n'avez pas besoin d'installer Flash, vous pouvez facilement le faire grâce aux nouvelles fonctionnalités fournies par Dreamweaver 4.0. 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. Selon Macromedia, 97% des internautes peuvent visualiser des pages Web avec des effets Flash, cette nouvelle fonctionnalité peut donc ajouter une certaine interactivité à la navigation et aux lecteurs des pages Web sans ajouter de problèmes de compatibilité. Sélectionnez Insérer · Images interactives · Texte Flash, puis remplissez les paramètres de préférence un par un (tels que le texte, le style de police, la couleur de la police, la taille de la police, etc. dont vous souhaitez modifier l'effet).