Mettre en page son design
Niveau : Initié
Temps : 15 à 45 minutes

Première partie : Exporter depuis Fireworks

Ce tutoriel a pour but de vous familiariser avec l'exportation de graphisme destiné au web depuis Fireworks, puis la mise en page sous Dreamweaver. Cette opération ne sera pas effectuée via les assistants de Fireworks, nous allons opérer manuellement pour un meilleur contrôle dans le processus de mise en page.

Pour débuter ce tutoriel, vous devez avoir réalisé le graphisme de votre site. Peu importe le logiciel utilisé à la base du moment que l'image est ouverte sous Fireworks (préférer le format PNG). Il est conseillé d'avoir déjà suivi le tutoriel d'initiation à Fireworks.

Votre image doit être ouverte dans fireworks et au format approprié. Pour un affichage minimal de 800*600 à l'écran prévoyez de la place pour la barre de défilement et autres bordures sous peine d'avoir une barre de défilement horizontale par la suite à la lecture de vos pages (Personnes mal voyantes, PC anciens ou administrations, aujourd'hui le minimum chez presque 80% des utilisateurs est le 1024*768 en résolution), soit environ 760 pixels de large pour votre image.



Nous allons délimiter les zones de découpe de cette image principale pour obtenir les images définitives qui seront imbriquées dans des tableaux html sous dreamweaver. Sélectionnez l'affichage des découpes dans la partie "web" des outils de Fireworks.



Puis sélectionnez l'outil de découpe.



Sur mon image, je vais découper "grossièrement" mon interface à titre d'exemple, afin de ne pas surcharger le tutoriel en étapes intermédiaires. Dans la pratique, le nombre de découpes peut être assez conséquent suivant la complexité de l'ensemble. Une découpe intelligente permet de gagner en temps de chargement des pages et voir s'afficher petit à petit une image par petites découpes est préférable pour la patience des visiteurs que d'attendre le chargement d'une seule grande image par exemple, donc savoir découper correctement une image est un sérieux atout dans la propreté d'un site. A vous de gérer les découpes comme il se doit !

Délimitez par exemple le premier coin de l'image où figure le logo...



... puis continuez avec autant de découpes que vos besoins l'exigent jusqu'au coté droit de l'image. Gardez à l'exprit que ceci sera disposé en tableaux, donc lignes / colonnes. Il faut donc que l'image soit découpée par lignes qui coïncident.

N'hésitez pas à zoomer à volonté pour plus de précision ("CTRL" + "+ pavé numérique" / "CTRL" + "- pavé numérique").

Pour que les découpes soient bien adjacentes, cliquez sur un des coins de la précédente (symbolisés par des carrés bleus) puis ajustez les dimensions en étirant. Fireworks magnétise par défaut les découpes sur les lignes précédentes donc aucune crainte pour que ce soit aligné quand vous voyez que le curseur le fait de lui même.



Ici pour la première ligne j'obtiens 3 découpes, celle du milieu servant par exemple pour un futur ajout de bannière publicitaire au dessus (nous verrons sous dreamweaver comment mettre les images découpées en fond pour pouvoir en ajouter d'autres par dessus).

Vous pouvez à tout moment reprendre l'outil de sélection (Pointeur / flèche noire) pour ajuster les découpes qui restent éditables, ou encore modifier leurs positions en tapant des valeurs au clavier sur le panneau de propriétés de Fireworks (par défaut en bas de l'image, voir tutoriel fireworks précédent).

Pour la ligne (imaginaire) suivante de mon image, il faut qu'au milieu de la barre grisée je puisse afficher une ligne de texte. Je vais donc là aussi effectuer 3 découpes pour divisier en 3 la ligne (rapidité d'affichage / meilleur centrage du texte par la suite si sa zone d'affichage est délimitée).
Vous pouvez voir que lorsqu'on réalise le graphisme d'un site, il faut penser à tout à l'avance et avoir une vision du résultat final. D'où l'importance par exemple d'un cahier des charges ou au mieux d'un croquis.



Il faut que cette interface s'adapte aux hauteurs de l'écran suivant son contenu (pas de coupure en bas, les côtés sont aussi long que le contenu du site), les côtés seront donc indépendants et "étirables" donc découpés indépendemment bien entendu. Pour réaliser l'effet "étirable" sélectionnez une largeur de droite ou de gauche sur un pixel de hauteur, ou la hauteur d'un motif complet (vous comprendez peut être mieux de quoi il s'agit une fois sous dreamweaver dans la seconde partie donc si dans votre cas c'est inutile, suivez juste à titre informatif, ça peut toujours servir pour une prochaine réalisation ou améliorer l'actuelle). Cette image sera affichée en mosaïque verticalement donc il ne faut pas de jointure visible entre les raccords, observez bien le résultat une fois la page web terminée et ajustez si besoin.



Ici ma découpe pour le fond de gauche fait 4 pixels de hauteur car l'image est composée de bandes colorées. Pour une mosaïque parfaite, j'ai donc sélectionné une bande foncée et une claire de mon motif, ce qui me donnera un fond uniforme à la fin.

Continuez les découpes de chaque côté comme pour le haut.



N'oubliez pas que les découpes pourront être ajustées par la suite si ça ne colle pas avec le contenu des pages.

Pour plus de facilité plus tard, vous pouvez nommer vos découpes dans le panneau de propriétés. Ceci facilite l'exportation car Fireworks applique des noms par défauts assez exotiques.



Il est temps maintenant de sélectionner les paramètres d'exportation. Il s'agit d'une étape importante car elle décidera du "poids" de cet ensemble d'images et donc de la rapidité d'affichage de vos pages.

Rendez-vous dans le menu "fichier" puis "Apperçu avant exportation".



Deux choix principaux s'offrent à vous, GIF ou JPEG. Le GIF gère la transparence (voir dans un prochain tutoriel dédié à Fireworks) mais n'affiche que jusqu'à 256 couleurs, alors que le JPEG permet des images en milions de couleurs sans transparence. Pour de la qualité photo on utilise courrament le JPEG, le GIF servant surtout à obtenir des images de faible poids lorsqu'elles ont une palette de couleur limités ou doivent avoir de la transparence.

Ici, le JPEG est tout indiqué. Sélectionnez-le dans le menu déroulant (repéré 1 sur l'image ci-dessus). Il faut maintenant trouver le bon compromis entre compression est qualité d'image (2). Utilisez une qualité entre 75 et 85 de préférence, 80 étant généralement suffisant. En modifiant la valeur, vous verrez en temps réel ce que donnerait l'image finale sur la partie droite de la fenêtre d'exportation. Faites attention à ce que l'image ne "bave" pas au niveau des détails si vous baissez trop sa qualité. Le poids final de l'image s'affiche en haut à droite (4) afin de contrôler de manière efficace. Vous pouvez aussi jouer sur le paramètre (3) "accentuer les bords des couleurs" afin de grapiller quelques Ko sur l'image si ça ne dégrade pas de trop sa qualité (tout dépend des détails là aussi). En haut à droite (5) vous pouvez enregistrer vos réglages, et en bas contrôler l'affichage de l'image prévisualisée (6). Une fois que les réglages vous conviennent, faites "OK" (7).

Toutes les découpes ont maintenant ce paramétrage. Pour le modifier individuellement, vous pouvez sélectionner la découpe voulue et la paramétrer sur le panneau "optimiser" sur la gauche de Fireworks.

Nous aurions pu exporter via assistant directement, mais ça manque de finesse à mon goût. Pour exporter les découpes, faites un clic droit sur chacune d'elle, cliquez sur "Exporter la découpe sélectionnée" et enregistrez comme il se doit avec le nom approprié. N'oubliez pas que pour le web, les noms doivent être en minuscule et si possible sans espace, accents ou caractères spéciaux. Nommez-les le plus court possible, vous gagnerez en poids sur le code de vos pages. Par exemple : img/interface/01.jpg, img/interface/02.jpg...



Pour désactiver l'affichage des découpes si vous avez besoin d'effectuer certains opérations sur l'image elle-même, il vous suffit de sélectionner "Msque les découpes..." dans les outils.



Vous voici maintenant avec votre interface découpée en plusieurs images, il ne vous reste plus qu'à suivre le tutoriel suivant et seconde partie de celui-ci "Mise en page sous dreamweaver" pour apprendre à reconstituer le tout sous Dreamweaver au format HTML !

N'hésitez pas à présenter vos réalisations sur le forum, ainsi que pour tout commentaire, complément d'information ou si vous avez besoin de précisions.