Prototypage de sites Web et d’interfaces d’application
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Créez des prototypes fonctionnels que vous pouvez envoyer pour révision et validation sous forme de document Adobe PDF.
This content requires Flash
Conditions requises
Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:
Adobe Fireworks CS4
Fichiers d'exemple
lrvid4034_fw_fr.zip (ZIP, 27MB)
Connaissances à avoir
Niveau intermédiaire pour la mise en page de sites web.
Prototypage de sites Web et d’interfaces d’applications
Adobe® Fireworks® CS4 apporte un grand nombre de possibilités pour présenter des prototypes de sites Web ou d’interfaces d’applications. Dans ce tutoriel, nous passerons en revue les différents types d’applications que vous pouvez prototyper dans Fireworks CS4, et également les différentes possibilités pour fournir un travail finalisé.
Prototypage HTML actif
Un des intérêts d’un prototypage HTML actif est de rendre possible la navigation à travers un site Web pendant la phase de validation. Parce que vous en êtes encore à la phase de conception, il est facile d’apporter des modifications. Pour commencer la phase de conception de votre prototype :
- Ouvrez ou créez une Page maîtresse dans Fireworks. La Page maîtresse est une fonctionnalité très pratique, puisqu’elle permet aux utilisateurs de partager des éléments communs de votre conception.
- Pour rajouter un hyperlien à un élément, choisissez l’outil de Zone sensible rectangulaire depuis les outils Web de la barre d’outils de Fireworks. Remarquez que l’Inspecteur de propriétés affiche les propriétés associées aux outils.
Image 1: L’outil Zone sensible rectangulaire
- Sélectionnez l’élément, texte ou graphique auquel vous voulez rajouter un hyperlien. Cliquez ensuite sur le Champ lien dans l’Inspecteur de propriétés.
Image 2: Le Champ lien de l’inspecteur de propriétés
- Choisissez la page Web que vous avez enregistrée sur votre disque dur depuis le menu déroulant. Vous avez créé un lien entre l’élément sélectionné et la page Web que vous avez désignée. Comme ce lien est défini depuis la Page maîtresse, il apparaîtra sur toutes les pages de votre conception.
- Pour exporter le fichier en tant que prototype de site Web fonctionnel, choisissez Fichier > Exporter. La boîte de dialogue d’exportation s’ouvre. Choisissez l’emplacement dans lequel enregistrer votre fichier.
Image 3: Exportation en tant que prototype de site Web fonctionnel - Choisissez HTML et image depuis le menu déroulant. Assurez-vous que la case à cocher Page actuelle uniquement est désélectionnée pour exporter toutes les pages de votre document.
- Pour configurer les réglages HTML, cliquez sur Option. La boîte de dialogue Configuration HTML s’ouvre. Les options Général sont affichées dans l’image 4. Cliquez sur OK pour fermer la boîte de dialogue et pour enregistrer la configuration HTML.
Image 4: Les réglages Configuration HTML
- Cliquez sur Enregistrer pour terminer l’exportation. Pour visualiser la page Web, double-cliquez sur le fichier HTML et il s’ouvrira alors dans votre navigateur par défaut.
Exportation CSS et images
Une des nouvelles fonctionnalités de Fireworks CS4 est la possibilité d’exporter aux normes standard CSS et HTML. Vous pouvez aussi définir une page Web fonctionnelle qui pourra être modifiée dans Dreamweaver ou un autre éditeur HTML. Pour exporter un document en CSS :
- Définissez la mise en page et le contenu de votre page Web.
- Choisissez Fichier > Export > CSS et images.
- Cliquez sur Option pour ouvrir la boîte de dialogue Configuration HTML. Modifiez les réglages HTML, comme l’Alignement de la page, si vous le souhaitez. Activez la case à cocher Ecrire les feuilles de style dans un fichier externe. Désélectionnez Ecrire les feuilles de style dans un fichier externe pour écrire les règles CSS dans la section Head de votre document HTML.
- Cliquez sur OK pour appliquer les changements et fermez la boîte de dialogue Configuration HTML.
- Créez un nouveau dossier dans lequel vous sauvegarderez votre page Web.
Image 5: Création d’un dossier
- Assurez-vous que la case à cocher Placer les images dans un sous-dossier est sélectionnée. Cliquez sur OK pour valider les modifications.
Remarque: Une fois que vous avez cliqué sur Enregistrer, vous pouvez voir le document dans Dreamweaver ou comme page Web dans votre navigateur. La page Web a alors le même aspect que dans Fireworks. Le texte reste modifiable, il n’a pas été converti en image. Seuls les éléments graphiques apparaissent comme des images dans la page Web.
Image 6: Prévisualisation de la page Web
Exportation en fichier PDF
Vous avez également la possibilité d’exporter le fichier en PDF. Pour exporter en fichier PDF:
- Choisissez Fichier > Exporter. Sélectionnez Adobe PDF depuis le menu Exportation de la boîte de dialogue d’Exportation.
- Pour protéger votre document par un mot de passe, cliquez sur Option. Vous pouvez aussi modifier les propriétés comme la compatibilité PDF, la compression, et la qualité des images depuis ce menu. Cliquez sur OK pour appliquer les modifications.
Image 7: Exportation d’un fichier PDF
Remarque: Si vous n’avez pas Acrobat installé, le fichier PDF s’ouvrira dans Adobe Reader®. Dans les deux applications, vous pouvez agrandir ou diminuer le zoom et cliquer sur les différents éléments. Le PDF garde son haut niveau d’interactivité vous permettant de tester le document sans avoir à l’ouvrir dans un navigateur. Les utilisateurs peuvent ajouter des annotations pour souligner des modifications et corrections.
Création d’un prototype AIR
Vous pouvez aussi créer un prototype AIR depuis un document Fireworks. Pour créer un prototype AIR :
- Choisissez Commandes > Créer un package AIR. La boîte de dialogue de Création de package AIR s’ouvre.
Image 8: Création d’un package AIR
- Pour créer un aperçu du document, cliquez sur le bouton Aperçu en bas de la boîte de dialogue.
Remarque: Le fichier a l’apparence d’une application pour bureau flottante. Vous pouvez cliquer sur différents éléments et naviguer dans le document. Vous pouvez aussi déplacer l’application au-dessus du bureau et la fermer quand vous avez terminé de la tester.
Démonstration du document courant
La dernière option pour avoir un aperçu d’un document Fireworks CS4 est d’utiliser l’option Démonstration – Document actif. Cette option est utile pour des documents n’ayant que peu d’interactivité et implique la définition d’un fichier en tant que présentation Flash. Pour utiliser l’option Démonstration – Document actif :
- Choisissez Commandes > Démonstration – Document actif. La boîte de dialogue Démonstration – Document actif s’ouvre. Sélectionnez les pages que vous voulez inclure dans la présentation Flash.
- Cliquez sur Créer une démo. La boîte de dialogue Sélectionnez un dossier s’ouvre. Vous pouvez choisir un dossier existant ou créer un dossier dans lequel enregistrer votre document.
- Sélectionnez un navigateur depuis la boîte de dialogue.
- Pour voir la page en tant que présentation Flash, ouvrez le document dans un navigateur tel que Fireworks. Vous verrez un menu de navigation vous permettant de lire la présentation ou de naviguer dans le document page par page.
Pour aller plus loin…
- Fireworks CS4 Assistance et Support
- Apprenez Fireworks CS4
- Introduction à Fireworks CS4, par Birnou Sébarte
- Compréhension d’un flux de production avec l’utilisation des styles et symboles, par Birnou Sébarte
- Créer des mises en page CSS/XHTML, par Birnou Sébarte
- video2brain.fr
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
A propos des auteurs
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
