Adobe Fireworks symboles de bouton

Créer des symboles de bouton

Les boutons sont un type spécial de symbole utilisé comme éléments de navigation pour une page Web. Vous pouvez facilement modifier les boutons à l'aide de l'inspecteur des propriétés. Parce que vous pouvez faire glisser les instances d'un bouton de la bibliothèque de symboles dans votre document, vous pouvez modifier l'apparence graphique d'un seul bouton et mettre à jour automatiquement l'apparition de toutes les instances de bouton dans une barre de navigation.

Vous pouvez modifier le texte, l'URL et la cible d'une instance de bouton sans affecter les autres instances du même bouton, et sans rompre la relation symbole instance.

Une instance de bouton est encapsulé. Feux d'artifice se déplace tous les composants et états associés aux boutons que vous faites glisser dans le document.

Comme d'autres symboles, les boutons ont un point d'enregistrement (un point central qui vous aide à aligner le texte et les différents états du bouton pendant que vous modifiez le bouton).

Sélectionnez l'objet que vous souhaitez convertir en un bouton.

Sélectionnez Modifier> Symbole> Convertir en symbole.

Dans la boîte de dialogue Convertir en symbole, entrez un nom pour le bouton.

Dans les options, puis sélectionnez le bouton.

(Facultatif) Pour activer l'échelle à 9 tranches pour le bouton, sélectionnez Activer 9 tranches Mise à l'échelle des guides.

(Facultatif) Pour enregistrer le graphique comme un bouton à la bibliothèque graphique dans Fireworks, sélectionnez Enregistrer dans la bibliothèque commune.

Appliquer les états aux boutons

Un bouton peut avoir jusqu'à quatre états différents, qui représentent l'apparence du bouton en réponse à un événement de la souris. boutons à deux états ont des états haut et bas. Et quatre boutons trois État ont l'état et les cours Plus Alors que les États vers le bas. Ces états représentent l'apparence du bouton lorsque le pointeur est déplacé au-dessus lorsque le bouton est en hausse (plus) ou vers le bas (plus bas Bien).

Vous pouvez créer une barre de navigation à l'aide des boutons à deux états ou trois états. Cependant, seuls les boutons avec les quatre états peuvent tirer profit du haut-Nav Bar comportements dans Fireworks.

Créer un bouton simple à deux états

Pour passer en mode d'édition de symbole, effectuez l'une des opérations suivantes:

Double-cliquez sur un bouton existant sur la toile.

Choisissez Edition> Insertion> Nouveau bouton.

Effectuez l'une des opérations suivantes pour importer ou créer l'état Up graphique:

Glisser-déposer ou d'importer le graphique que vous voulez apparaître comme l'état Up dans la zone de travail du bouton.

Utilisez les outils de dessin pour créer un graphique ou utiliser l'outil Texte pour créer un bouton de texte.

Cliquez sur Importer un bouton de l'inspecteur des propriétés et sélectionnez un bouton modifiable prêt à l'emploi à partir des symboles d'importation: bibliothèque de boutons. Avec cette option, est automatiquement rempli chacun des états du bouton avec les graphiques et les textes appropriés.

(Facultatif) Définissez l'échelle à 9 tranches guides pour maintenir la forme du bouton d'être déformée lorsqu'elle est redimensionnée. (Voir Appliquer guides 9 tranches à un symbole.)

(Facultatif) Sélectionnez l'outil Texte et créer un texte pour le bouton.

Pour créer l'Etat sur, sélectionnez Plus dans le menu contextuel et effectuez l'une des opérations suivantes:

Cliquez sur Copier le graphique pour coller une copie du bouton d'état Up dans la fenêtre Au-dessus, puis le modifier.

Glisser-déposer, d'importer ou de dessiner un graphique.

(Facultatif) Pour utiliser les filtres en direct pour créer des apparences communes pour chaque état, sélectionnez l'image à laquelle vous souhaitez ajouter un filtre en direct et cliquez sur le signe plus (+) icône à côté de l'étiquette Filtres dans l'inspecteur des propriétés.

Sélectionnez Biseau et Emboss> Inner Bevel, ou Emboss Encart ou Biseau externe, ou Emboss surélevé.

Sélectionnez un bouton filtre prédéfini pour chaque état.

Créer un bouton à trois ou quatre états

Bien que ne sont pas obligatoires, les en utilisant les boutons à quatre états vous permet de tirer parti des comportements de barre de navigation intégrée.

Avec un bouton à deux états ouvert dans la toile dans le mode d'édition de symbole, sélectionnez dans le menu vers le bas contextuel dans l'inspecteur des propriétés et effectuez l'une des opérations suivantes:

Cliquez sur Copier Plus de graphique pour coller une copie du bouton de l'État sur dans la fenêtre vers le bas, puis le modifier pour changer son apparence.

Glisser-déposer, d'importer ou de dessiner un graphique.

Pour ajouter un état Au-dessus Enfoncé vers le bas, vérifiez que le bouton d'état vers le bas est pas ouverte et répétez 1.

(Facultatif) Appliquer des filtres prédéfinis aux boutons.

Remarque: Lorsque vous insérez ou créez un graphique pour le ou vers le bas Plus Alors que les Tates de Down, les options, y compris l'état dans la barre de navigation sont automatiquement sélectionnés.

Convertir les renversements Fireworks en boutons

Vous pouvez convertir des boutons de survols qui ont été créés dans les versions précédentes de Fireworks et les enregistrer dans la bibliothèque. Pour plus d'informations sur les renversements, voir des tranches interactives.

Supprimer la tranche ou une zone sensible couvrant les images de survol.

Sélectionnez Afficher tous les États dans le menu Pelure d'oignon dans le panneau Etats.

Sélectionnez tous les objets que vous souhaitez inclure dans le bouton. Utilisez le outil Sélectionner derrière pour sélectionner des objets cachés.

Sélectionnez Modifier> Symbole> Convertir en symbole.

Entrez un nom pour le symbole dans la zone Nom et sélectionnez un type de symbole Bouton.

Insérer et importer des symboles de bouton

Vous pouvez insérer des occurrences de symboles de bouton dans un document à partir du panneau Bibliothèque commune. Vous pouvez également importer des symboles de bouton existant dans le panneau Bibliothèque de documents d'un nouveau document. Pour plus d'informations, voir symboles Importation et exportation.

Pour insérer des occurrences d'un bouton dans un document, ouvrez le panneau Bibliothèque commune et faites glisser le symbole de bouton pour le document.

Pour placer des occurrences supplémentaires d'un symbole de bouton, effectuez l'une des opérations suivantes:

Sélectionnez une instance, puis sélectionnez Modifier> Cloner pour placer une autre instance directement devant l'instance sélectionnée. La nouvelle instance devient l'objet sélectionné.

Faites glisser une autre instance de bouton du panneau Bibliothèque de documents au document.

Maintenez la touche Alt (Windows) ou Option (Mac OS) une instance sur la toile pour créer une autre instance de bouton.

Copier une instance puis coller des instances supplémentaires.

Pour importer des symboles de bouton dans le panneau Bibliothèque de documents d'un nouveau document, effectuez l'une des opérations suivantes:

Glisser-déposer (ou couper et coller) une instance de bouton d'un autre document Fireworks.

symboles bouton Importer à partir d'un fichier PNG Fireworks.

symboles de bouton Exporter d'un autre document Fireworks dans un fichier de bibliothèque PNG, puis importer des symboles de bouton à partir du fichier de bibliothèque PNG dans le document.

Sélectionnez Symboles d'importation à partir du panneau Bibliothèque de documents menu Options. Les bibliothèques contiennent une grande variété de symboles de bouton préparés par Adobe premade.

bouton Modifier les symboles

Vous pouvez modifier plusieurs instances de propriétés du bouton au niveau du symbole ou vous pouvez modifier des instances uniques de propriétés du bouton.

propriétés du bouton Modifier au niveau de symbole

propriétés éditables bouton de niveau symbole sont généralement cohérentes entre boutons dans une barre de navigation. Voir les exemples suivants:

aspect graphique comme la couleur de la course et le type, la couleur de remplissage et le type, la forme de chemin, et les images

Filtres en direct ou l'opacité appliqués aux différents objets dans le symbole de bouton

Taille et la position de la zone active

comportement du bouton central

Paramètres d'optimisation et d'exportation

lien URL (également disponible en tant que propriété niveau de l'instance)

Cible (également disponible en tant que propriété niveau de l'instance)

propriétés du bouton Modifier au niveau de l'instance

propriétés par exemple au niveau éditables diffèrent généralement d'un bouton à une série de boutons. Vous pouvez modifier les propriétés de niveau d'instance pour une instance sans affecter le symbole associé ou tout autre cas de ce symbole. Voir les exemples suivants:

Nom de l'objet d'une instance, qui apparaît dans le panneau Calques et est utilisé pour nommer les tranches exportées pour l'instance de bouton lors de l'exportation

Filtres en direct ou l'opacité appliqués à l'instance entière

Les caractères de texte et le formatage du texte

lien URL (remplace toute URL qui existe en tant que propriété de niveau de symbole)

Autre (alt) image description

Target (remplace toute trame cible qui existe en tant que propriété de niveau de symbole)

D'autres comportements attribués à une instance à l'aide du panneau Behaviors

L'Afficher l'état Enfoncé sur l'option de charge dans l'inspecteur des propriétés pour les instances dans une barre de navigation

Remarque: Lorsque vous sélectionnez l'option Exporter plusieurs fichiers à partir du document section spécifique de la boîte de dialogue Configuration HTML, puis exporter une barre de navigation, Fireworks exporte chaque page HTML avec l'état correspondant vers le bas du bouton. Voir Définir les options d'exportation HTML.

Définir les propriétés des boutons interactifs

Vous pouvez contrôler les éléments interactifs suivants d'un bouton:

Zone active La zone active déclenche l'interactivité lorsqu'un utilisateur déplace le pointeur au-dessus ou déclic d'un navigateur Web. La zone active d'un bouton est une propriété de niveau de symbole et est unique aux symboles de bouton. Sélectionnez Zone active dans le menu contextuel pour modifier une tranche de bouton ou de dessiner des objets hotspot. Si vous dessinez une nouvelle tranche, la nouvelle tranche remplace la tranche précédente.

Bouton cible La cible de bouton est la fenêtre ou le cadre dans lequel la page Web de destination apparaît lorsque l'utilisateur clique une instance de bouton. Si vous ne saisissez pas une cible dans l'inspecteur des propriétés, la page Web apparaît dans le même cadre ou fenêtre que le lien qui l'a appelé. La cible peut être une propriété de bouton niveau de l'instance ou symbolisation. Vous pouvez définir la cible d'un symbole, de sorte que toutes les instances du symbole ont la même cible.

Texte alternatif (alt) pour un symbole de bouton ou de l'instance texte alternatif (alt) apparaît sur ou à proximité d'un espace réservé d'image alors qu'une image est en cours de téléchargement ou à la place d'une image si elle ne parvient pas à télécharger. Il remplace également des graphiques si l'utilisateur a le jeu de navigateur pour ne pas afficher des images. Alt text peut être une propriété de bouton niveau de l'instance ou symbolisation.

Modifier les propriétés des boutons interactifs

Remarque: La modification de la cible, l'URL ou le texte alt pour un symbole de bouton ne change pas occurrences de bouton de ce symbole.

Ouvrez le symbole du bouton dans le mode d'édition de symbole.

Effectuez l'une des actions suivantes:

Pour modifier un point d'accès ou dans la tranche zone active du symbole de bouton, sélectionnez Zone active dans le menu contextuel dans l'inspecteur des propriétés. Utilisez l'outil Pointeur pour déplacer ou remodeler la tranche ou un guide de coupe. Ou, utilisez l'un des outils de découpe ou de référence pour dessiner une nouvelle zone active.

Pour définir l'URL d'un symbole de bouton, sélectionnez Zone active dans le menu contextuel. Ensuite, entrez l'URL dans la zone Lien dans l'inspecteur des propriétés, sélectionnez une page dans la liste, ou sélectionnez une URL à partir du panneau URL.

Pour définir la cible d'un symbole de bouton, ouvrez le bouton dans l'espace de travail. Entrez ensuite une cible dans la zone cible, ou sélectionnez l'une des cibles prédéfinies suivantes dans le menu cible dans l'inspecteur des propriétés:

Aucun ou _self charge la page Web dans le même cadre ou fenêtre que le lien

_blank charge la page Web dans une nouvelle fenêtre du navigateur sans nom

_parent charge la page Web dans le jeu de cadres parent ou de la fenêtre de la trame qui contient le lien

_top charge la page Web dans la fenêtre du navigateur, supprimer tous les cadres

Pour définir le texte alt pour un symbole de bouton ou de bouton, sélectionnez l'instance de bouton dans l'espace de travail. Puis, dans l'inspecteur des propriétés, entrez le texte ou la description que vous souhaitez appliquer.

Articles Liés