Didacticiel du Pôle de création
Créez un en-tête de page Web avec une barre de navigation à onglets
Avec l'outil Rectangle d'onglet d'Adobe® ImageReady® CS et la palette Contenu Web, il n'est pas nécessaire d'être un expert en JavaScript pour créer un en-tête interactif pour votre page Web. A l'aide des outils avec lesquels vous vous êtes familiarisés dans Adobe Photoshop®, vous pouvez placer des images, un style de texte et créer d'autres éléments de conception pour l'en-tête. De plus, avec les palettes Calques et Contenu Web d'ImageReady, il est facile de créer une barre de navigation qui varie en fonction du déplacement de la souris ou de la sélection d'un onglet. Mieux encore, lorsque vous avez terminé, vous pouvez placer l'en-tête directement dans Adobe GoLive® ou optimiser l'en-tête pour le Web et laisser ImageReady écrire le code à votre place.
1. Créez le document
Ouvrez ImageReady et choisissez Fichier > Nouveau pour créer un nouveau document. Dans la boîte de dialogue Nouveau document, sélectionnez Page Web dans la zone Taille de l'image et Blanc dans la zone Contenu du premier calque. Bien qu'une page Web 600 x 500 pixels soit largement assez grande pour votre en-tête, le fait de commencer avec cette taille de page vous permet d'évaluer le positionnement de votre en-tête et de votre barre de navigation dans une page Web entière. Vous pouvez recadrer la zone qui dépasse lorsque vous avez terminé la conception de la page.
2. Composez les éléments de l'en-tête
Dans le document, placez les images que vous souhaitez inclure dans l'en-tête. Ajoutez les autres éléments de conception sauf la barre de navigation. Pour utiliser les outils ou appliquer les effets disponibles uniquement dans Photoshop, choisissez Fichier > Modifier dans Photoshop. Lorsque vous avez terminé, retournez dans ImageReady en sélectionnant Fichier > Modifier dans ImageReady.
3. Créez le premier onglet pour la barre de navigation
Activez d'abord les règles en sélectionnant Affichage > Règles, puis faites glisser un guide de la règle horizontale à l'emplacement où vous souhaitez aligner les parties supérieures des onglets. Assurez-vous que l'option Magnétisme du menu Affichage est sélectionnée. Choisissez la taille de vos onglets. Si vous voulez 4 onglets, chacun doit avoir une taille de 150 pixels (rappelez-vous, la largeur de page est de 600 pixels). Sélectionnez l'outil Rectangle d'onglet. Ensuite, dans la barre d'options située en haut de la zone de travail, assurez-vous que l'option Calque de la forme est sélectionnée. Sélectionnez Taille fixe et saisissez les valeurs pour la largeur et la hauteur, réglez le rayon d'arrondi si vous le souhaitez et sélectionnez la couleur pour l'onglet. Pour créer le premier onglet, cliquez sur le guide que vous avez placé pour les onglets. Puisque vous avez sélectionné Taille fixe, ImageReady crée l'onglet en utilisant les dimensions que vous avez spécifiées dans la barre d'options. Si nécessaire, utilisez l'outil Déplacement ou les touches fléchées pour repositionner l'onglet.
Lorsque vous créez l'onglet, un nouveau calque est ajouté à la palette Calques. Cliquez deux fois sur le nom de ce calque et tapez un nom descriptif pour l'onglet. Pour rendre l'aspect que vous souhaitez, appliquez les styles de calques en cliquant sur le bouton Style de calque en bas de la palette Calques.
4. Ajoutez du texte à la barre de navigation
Dans la palette Caractère, définissez les attributs de polices et la couleur pour le texte de l'onglet. A l'aide de l'outil Texte, saisissez le texte au centre de l'onglet, puis appliquez des styles de couches. Sélectionnez l'outil Déplacement (assurez-vous que l'icône de l'outil Déplacement de calque est sélectionnée dans la barre d'options) et faites glisser le texte à l'emplacement de votre choix dans l'onglet. Si la commande Magnétisme est sélectionnée dans le menu Affichage, les guides optimisés apparaissent dès que vous vous rapprochez du centre ou des bords de l'onglet.
