Pour les créateurs de pages Web professionnels qui souhaitent créer des pages Web complexes dans un environnement visuel, Dreamweaver a progressivement émergé sur le marché des outils d'édition de pages Web et est devenu le meilleur choix pour les professionnels qui rédigent des pages Web. À 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).
7. Modifier les raccourcis clavier Dreamweaver permet aux utilisateurs de personnaliser l'interface. Cette conception est très flexible. Par exemple, les utilisateurs peuvent modifier le menu en écrivant des programmes ou en ajoutant 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. Sélectionnez simplement Modifier · Raccourcis clavier et la boîte de dialogue chargera et répertoriera une liste de touches de raccourci pouvant être modifiées. vous permettant de modifier rapidement la clé à la valeur de réglage à laquelle vous êtes habitué. Pour modifier une touche de raccourci, utilisez simplement les menus déroulants de la liste Ensemble et commande 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 rapides. dans la liste des clés. De plus, si vous souhaitez ajouter un paramètre de touche rapide, vous pouvez sélectionner le bouton Plus, saisir la nouvelle touche représentative rapide que vous souhaitez utiliser sur le clavier et sélectionner Modifier. Dans le même temps, vous pouvez également sélectionner une touche de raccourci et sélectionner la touche de suppression (Moins) pour supprimer une touche de raccourci.
8. Réinitialisez la largeur des colonnes de la fenêtre Site. Sélectionnez simplement Affichage · Colonnes de la vue Fichier dans la fenêtre Site pour personnaliser la taille et la présentation de la largeur des colonnes lors de l'affichage de la vue Site. Sélectionnez une colonne de noms et utilisez les flèches haut et bas pour redimensionner, ou décochez Afficher le champ pour masquer la colonne. De plus, vous pouvez également ajouter des colonnes en sélectionnant le bouton Plus et créer vos propres noms de colonnes. De plus, vous pouvez associer une colonne à une Design Note en sélectionnant une note existante dans le menu déroulant.
9. Lisez le fichier de la page Web d'origine. Lorsque vous ouvrez la référence du code O'Reilly (Fenêtre · Référence) pour vérifier les propriétés ou la compatibilité du navigateur, la fenêtre par défaut affichera les paramètres de référence en petites polices. 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 document original (petite, moyenne et grand). . Choisir des polices de grande taille est moins dur pour les yeux car vous n'avez pas besoin de tenir une loupe pour regarder l'écran lors de la visualisation du fichier HTML original !
10. Ajoutez un nouveau bouton Flash Ci-dessus, je vous ai appris à utiliser 20 types de boutons prédéfinis pour créer des boutons Flash dans Dreamweaver. Cette méthode ne nécessite pas l'installation de fichiers ou de programmes supplémentaires. Il existe une autre méthode ci-dessous, qui consiste à installer les boutons Fireworks. Cette fonction étendue a le même effet que l'astuce 5. 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 de 577 Ko. Basculez vers Dreamweaver, sélectionnez Commandes · Gérer les extensions, puis sélectionnez Fichier · Installer l'extension pour démarrer l'installation. Une fois Dreamweaver réactivé, il existe six types de boutons nouveaux et intéressants, dont Surfboard et Bulletbar. Pour le moment, utilisez simplement la commande Insérer · Images interactives · Bouton Feux d'artifice 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.
11. Ajoutez la fonction « Définir comme favoris » à la page Web et recherchez dans Exchange, vous pouvez trouver la fonction d'extension Ajouter aux favoris. Ce petit fichier n'occupe que 3 Ko, 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, Fichier · Installer l'extension). Réactivez ensuite Dreamweaver. Ce fichier d'extension nouvellement chargé ajoutera une nouvelle fonctionnalité à Dreamweaver. Si vous ajoutez cette fonction « ajouter aux favoris » à votre page web, alors lorsqu'un internaute visite votre site web, il pourra facilement ajouter votre site web aux favoris de son navigateur en un seul clic (ou dans ses favoris personnels). De plus, vous pouvez également personnaliser le nom du raccourci favori et la petite icône qui apparaîtra devant le nom du raccourci favori (généralement, la petite icône devant le raccourci favori dans IE est la valeur par défaut d'IE. Si vous ayez votre propre La petite icône conçue est beaucoup plus cool. Notez que cette fonction ne prend en charge que les navigateurs avec IE 4.0 et supérieur. Sélectionnez simplement le panneau Comportement dans le menu Windows et sélectionnez cette option dans le menu déroulant de la fonction IE 12.
Voulez-vous créer un graphiquesympa
, devez-vous encore passer du temps à taper le code source de la page Web ? Il existe déjà un formulaire prêt à l'emploi à télécharger depuis Exchange ! pour copier instantanément un formulaire contenant des champs tels que le pays, le sexe, l'état civil, la tranche d'âge et d'autres catégories. Téléchargez ce petit fichier (seulement 11 Ko) depuis Exchange, puis utilisez le gestionnaire d'extensions. Installez-le (Commandes · Gérer les extensions, Fichier). ·Installer l'extension). Ensuite, réactivez simplement Dreamweaver et sélectionnez Insérer·FormBuilder, et vous trouverez le fichier d'extension dans (Insérer·FormBuilder). Après la sélection, une boîte de dialogue apparaîtra, tous les menus de format applicables seront affichés.