Incorporation de vidéos et autres contenus HTML dans Adobe Muse

Le code HTML intégré fait référence au code source généré par un site web tiers, tels que Google, YouTube, Flickr ou Picasa. Vous pouvez configurer un compte sur ces sites web, vous connecter, puis copier le code d’intégration depuis leur site et l’ajouter à votre site.

Lorsque vous collez du code HTML intégré dans une page, cela revient à placer sur une page de votre site, une fenêtre affichant le contenu d’un site tiers.

Le code HTML intégré est un excellent moyen d’ajouter des informations complexes (telles que des cartes, des prévisions météorologiques, les cours de la bourse) ainsi que des médias enrichis (comme des vidéos numériques, des diaporamas et des fichiers audio) rapidement et facilement. Cette stratégie vous permet également d’utiliser le site d’un tiers comme un service d’hébergement et une interface de téléchargement. Par exemple, si vous créez un compte gratuit avec YouTube, vous pouvez créer votre propre canal YouTube et télécharger le contenu vidéo pour votre site. YouTube comprend une page web, ce qui simplifie le processus de chargement, et héberge les fichiers vidéo sur son site. Lorsque vous souhaitez mettre à jour votre site, il vous suffit d’ajouter d’autres vidéos sur votre canal YouTube, de copier le code d’intégration, puis de le coller dans une page pour ajouter de nouvelles vidéos sur votre site Muse.

Dans cette section, vous allez copier le code source depuis Tumblr. Il s’agit d’un service en ligne gratuit qui requiert la création d’un compte, de s’y connecter, puis de publier des entrées de blog accessibles au public. Les blogs sont faciles à utiliser et particulièrement utiles lorsque vous souhaitez permettre aux personnes ayant peu de connaissances techniques de mettre facilement à jour leurs propres sites. La plupart des blogs incluent une interface en ligne. Vous pouvez ainsi utiliser n’importe quel navigateur pour vous connecter à votre compte et publier de nouvelles entrées, sans connaissances en matière de code HTML, ni logiciel supplémentaire.

Remarque : les visiteurs qui consultent votre site web n’ont pas besoin d’avoir un compte Tumblr pour afficher le blog que vous avez intégré sur la page. Vous seul devez disposer d’un compte en tant que concepteur du site, afin de créer un blog personnalisé et de générer le code d’intégration que vous allez ajouter à votre site web.

1. Pour suivre ce tutoriel, il n’est pas nécessaire de créer un compte Tumblr. Il vous suffit de copier le code suivant, qui a été généré par le site web de Tumblr suite à la création d’un blog gratuit :

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. Dans la vue Plan, double cliquez sur la vignette de la page des événements pour l’ouvrir et la modifier en mode Conception.
3. Cliquez au centre de la page vide et utilisez l’une des méthodes suivantes pour intégrer le code HTML :

• Choisissez Edition > Coller ou utilisez le raccourci clavier (Commande+V pour Mac ou Ctrl+V pour Windows) pour coller le code directement sur la page.
• Choisissez Objet > Insérer du code HTML. Cliquez dans le champ de la fenêtre Modifier le code HTML qui s’affiche et collez le contenu. Cliquez sur OK pour fermer la fenêtre Modifier le code HTML.

Remarque : dans la plupart des cas, Muse reconnaît et intègre automatiquement le code HTML que vous collez directement sur la page. Toutefois, si vous voyez le code sur la page, au lieu du contenu issu du site web tiers, choisissez alors Objet > Insérer du code HTML.

Une fois le code HTML inséré, un rectangle bleu avec des poignées s’affiche, entourant les billets de blog qui ont été saisis pour le compte Tumblr du Katie’s Café.

4. Utilisez l’outil de sélection pour faire glisser les poignées afin de redimensionner le contenu du blog, de façon à ce qu’il s’étende sur environ 80 % de la largeur de la page. Centrez le contenu de blog sur la page pour laisser apparaître l’image d’arrière plan mosaïque sur les côtés gauche et droit. Des rectangles de mesure bleus affichent la distance par rapport à d’autres objets. Un repère d’alignement rouge s’affiche brièvement pour signaler que l’objet sélectionné est centré verticalement.

Voilà tout ce que vous devez faire pour intégrer du code HTML dans des pages Muse. Si jamais vous souhaitez modifier le code HTML, vous pouvez cliquer avec le bouton droit de la souris sur un élément HTML intégré, puis choisir Modifier le code HTML dans le menu contextuel qui s’affiche. La fenêtre Modifier le code HTML s’ouvre alors, vous permettant d’accéder au code que vous avez collé précédemment.

A présent, il est temps de vérifier les modifications que vous avez apportées à la page des événements :

5. Choisissez Fichier > Prévisualiser la page dans le navigateur pour voir la page des événements s’afficher dans une nouvelle fenêtre de navigateur.

Vous remarquerez qu’au fur et à mesure que vous faites défiler la liste des entrées de blog, l’en-tête s’affiche au-dessus du contenu de la page. Ce comportement se produit car la page des événements utilise le gabarit de premier plan, et que le contenu de l’en-tête de ce gabarit est défini pour s’afficher au premier plan.

La page des événements est maintenant terminée. Dans la section suivante, vous allez apprendre à coller un contenu de code HTML intégré dans un widget, afin de contrôler la manière dont le contenu tiers s’affiche selon les interactions de l’utilisateur.

Incorporation d’une vidéo sur votre site web Muse

Actuellement le conteneur cible est rempli d’une couleur de fond grise. Toutefois, vous pouvez placer tout type de contenu dans le conteneur cible, y compris différents fichiers d’image, des rectangles remplis, du texte ou du code HTML intégré que vous avez copié depuis un autre site web.

Pour cet exemple, vous allez coller du code HTML intégré qui a été généré par YouTube.

Imaginez que vous visitez une page sur YouTube.com pour visionner une vidéo que vous avez téléchargée via votre compte. Si vous cliquez sur le bouton Partager, puis sur Intégrer, vous pouvez accéder au code d’intégration de la vidéo et le copier.

Dans le cadre de ce tutoriel, le code d’intégration pour la vidéo de Katie’s Café a déjà été copié depuis leur site, vous n’avez donc pas à vous rendre sur YouTube. Copiez le code d’intégration ci-dessous pour l’enregistrer dans le presse-papiers :

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

Le code ci-dessus utilise des balises iFrame pour entourer le lien vers le fichier vidéo qui se trouve sur YouTube. Une balise iFrame est un conteneur HTML qui vous permet d’afficher le contenu dans une « fenêtre » lorsque vous l’ajoutez à la page web.

Après avoir copié le code ci-dessus, revenez sur Muse.

1. Utilisez l’outil de sélection pour cliquer sur la bordure grise de la page, de telle sorte que l’indicateur de sélection, situé dans l’angle supérieur gauche, affiche le mot Page. Cela signifie que l’intégralité de la page est sélectionnée.
2. Cliquez sur le plus grand conteneur cible avec la couleur de fond grise. L’indicateur de sélection, situé dans le coin supérieur droit, affiche le mot : Composition. Cliquez à nouveau sur le conteneur cible gris afin que l’indicateur de sélection affiche le mot : Conteneur. Cliquez à nouveau dessus (le mot Déclencheur s’affiche), puis une fois encore, jusqu’à ce que l’indicateur de sélection affiche le mot : Cadre de l’image. Appuyez sur la touche Supprimer (Mac) ou Retour arrière (Windows) pour supprimer le cadre de l’image du conteneur cible.

Le conteneur cible interne étant toujours sélectionné, la section suivante explique le collage du code HTML précédemment copié dans le conteneur cible.

Remarque : comme vous l’avez découvert lors de l’opération de collage de l’image principale dans le conteneur de déclenchement, le collage du code dans un conteneur cible peut s’avérer délicat car l’objectif est de coller le code A L’INTERIEUR du conteneur cible du widget. Il est possible (selon l’élément que vous avez sélectionné) de coller le code de la vidéo en dehors du widget, de façon à ce qu’il soit directement intégré à la page. Procédez prudemment... si vous testez le cadre lumineux en cliquant sur Aperçu et que la vidéo s’affiche même si vous n’avez pas encore cliqué sur l’image principale, cela signifie que le code de la vidéo n’a pas été correctement collé dans le conteneur, ce qui explique pourquoi elle s’affiche immédiatement. La vidéo doit s’afficher uniquement lorsque vous cliquez sur l’image principale.

Procédez comme suit pour coller le code de la vidéo dans le conteneur cible (alors que l’indicateur de sélection affiche le mot : Conteneur).

3. Choisissez Objet > Insérer du code HTML. Dans la fenêtre qui s’affiche, sélectionnez le texte par défaut de l’espace réservé et appuyez sur Supprimer (Mac) ou Retour arrière (Windows) pour le supprimer. Choisissez Edition > Coller pour coller le code YouTube que vous avez copié précédemment dans le champ Code HTML. Cliquez sur OK pour fermer la fenêtre Code HTML.

Remarque : dans la plupart des cas, Muse détecte automatiquement que vous collez du code HTML et qu’il s’agit précisément de code HTML et non pas de texte brut. Par conséquent, au lieu de choisir Objet > Insérer du code HTML pour ouvrir la fenêtre HTML, vous pouvez également, si vous préférez, cliquer avec le bouton droit de la souris (ou cliquer en maintenant la touche Ctrl enfoncée), le conteneur cible interne étant sélectionné, et choisir Coller dans le menu contextuel qui apparaît. (Ou choisissez Edition > Coller ou utilisez le raccourci clavier pour coller le code source dans le conteneur cible). Muse propose plusieurs méthodes pour atteindre le même objectif, à savoir coller le code de la vidéo dans le conteneur cible.

Une fois le code collé dans le conteneur cible, la première image de la vidéo s’affiche (une tasse de café). Cette première image de la vidéo indique que le code d’intégration HTML a été correctement collé. La vidéo n’est pas lue lorsque vous modifiez la page dans la vue Conception. Elle ne sera lue que lorsque vous aurez cliqué sur le bouton Aperçu dans le panneau de configuration ou que vous aurez prévisualisé la page dans un navigateur.

4. Utilisez l’outil de sélection pour redimensionner, si nécessaire, le conteneur cible, afin qu’il s’adapte à la taille du contenu de la vidéo HTML intégré. La largeur doit être de 670 pixels et la hauteur doit être de 415 pixels, environ. Lorsque la vidéo est sélectionnée, l’indicateur de sélection affiche le mot Elément HTML.
5. Le conteneur cible étant sélectionné, appuyez une fois sur la touche Echap pour sélectionner le conteneur externe. Ou si vous préférez, cliquez sur un emplacement éloigné afin de désélectionner le widget Cadre lumineux, puis cliquez deux fois sur le widget : la première fois pour sélectionner la composition, puis une seconde fois pour sélectionner le conteneur, plus grand. Utilisez l’outil de sélection pour faire glisser les poignées du conteneur, de sorte que le conteneur cible soit centré à l’intérieur de celui-ci. Redimensionnez le conteneur à une largeur de 710 pixels et à une hauteur de 460 pixels.
6. Utilisez le menu Fond pour définir la couleur de fond du conteneur sur marron (#63301B) et l’opacité de la couleur de fond sur 100.

7. Sélectionnez le bloc de texte situé dans la partie inférieure du conteneur et appuyez sur Supprimer (Mac) ou Retour arrière (Windows) pour le supprimer. Le bloc de texte peut être complété par une légende pour le contenu cible, mais dans ce projet, il n’est pas utilisé.
8. Sélectionnez la case de fermeture (avec une croix [X]), située dans le coin supérieur droit du conteneur. Cliquez à l’intérieur de la case de fermeture pour sélectionner son libellé et supprimez-le. Utilisez le menu Fond pour définir la couleur du fond sur aucun. Cliquez sur l’icône de dossier située en regard de la section Image du menu Fond et parcourez l’arborescence pour sélectionner le fichier nommé icon-close.png. Utilisez l’outil de sélection pour redimensionner la case de fermeture, de sorte que la totalité de l’image de l’icône de fermeture soit affichée.
9. Utilisez l’outil de sélection pour repositionner le conteneur cible et les conteneurs de déclenchement, pour les déplacer vers l’emplacement où vous souhaitez qu’ils apparaissent sur la page.
10. La composition étant sélectionnée, cliquez sur la flèche bleue pour ouvrir le panneau Options. Dans cet exemple, utilisez les paramètres suivants :
    • Position : Cadre lumineux
    • Transition : Fondu
    • Lecture auto. : Désactivé
    • Aléatoire : Désactivé
    • Tout masquer au début : Désactivé
    • Activer le glissement : Activé
    • Déclencheurs au premier plan : Désactivé
    • Bouton de fermeture : Activé
    • Afficher le cadre lumineux entier (Conception) : Activé
    • Tout afficher (Conception) : Activé

Cliquez n’importe où en dehors du menu Options pour le fermer. A ce stade, le widget est à présent configuré et prêt à être testé.

Précédemment dans ce tutoriel, vous avez appris à intégrer du code HTML sur des pages pour ajouter un blog Tumblr sur la page des événements. Vous avez également appris à coller du code HTML intégré dans un widget Composition de cadre lumineux, pour afficher une vidéo YouTube dans une fenêtre de cadre lumineux lorsque l’utilisateur clique sur un bouton. Dans cette section, vous allez découvrir un autre type de code HTML intégré qui est fourni par le site Google Maps. Procédez comme suit :

1. Si la page de visite n’est pas déjà ouverte en mode Conception, cliquez sur Plan, puis double-cliquez sur la vignette de la page de visite pour la modifier.

Ce code source a été copié à partir du site maps.google.com. Vous pouvez créer une carte personnalisée pour une adresse (ou, dans le cas présent, pour plusieurs emplacements). Il s’agit d’un service gratuit, vous fournissez simplement l’adresse (ou les adresses) et cliquez sur le bouton Créer une carte.

Une fois la carte créée, l’interface Google Maps permet d’entrer un titre et une description. Vous pouvez ensuite cliquer sur le bouton Lien pour accéder au code. Sélectionnez le code HTML fourni dans le champ « Collez le code HTML pour l’intégrer à un site web » ; vous pouvez dès lors revenir à Muse et intégrer le code HTML sur une page.

Pour les besoins de ce tutoriel, il n’est pas nécessaire de créer vous-même une nouvelle carte. Si vous préférez tester cette procédure, saisissez une adresse quelconque, créer une carte et copier le code généré. Toutefois, si vous préférez simplement en tester le fonctionnement, vous pouvez utiliser du code HTML prégénéré.

2. Copiez le code source suivant :

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. Collez le code sur la partie supérieure de la page de visite. Utilisez l’outil de sélection pour positionner le code HTML intégré au centre vertical de la page, en haut de l’écran, afin qu’un quart de la carte chevauche la zone d’en-tête. Veillez à conserver un certain espace entre la carte et le graphisme de fleur au-dessous, pour pouvoir y ajouter une description textuelle.
4. Utilisez l’outil Texte pour faire glisser un bloc de texte sous la carte intégrée. Copiez le texte ci-après et collez-le dans le bloc de texte :

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie’s impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

5. Utilisez le panneau Texte pour appliquer les paramètres suivants afin de définir le style du texte :
   • Police : Droid Serif (ou n’importe quelle police avec empattement)
   • Corps de la police : 14
   • Couleur de la police : #222222
   • Alignement de la police : à gauche
   • Interligne : 120 %

Une fois la description ajoutée à la carte, la page de visite est maintenant terminée.

6. Choisissez Fichier > Prévisualiser la page dans le navigateur pour voir comment la page de visite s’affiche dans un navigateur.

Notez que la carte Google en HTML intégré est interactive. Vous pouvez cliquer sur les flèches pour faire un panoramique autour de la carte dans sa propre fenêtre, ou cliquer sur les boutons + et – pour effectuer un zoom avant et arrière.

La conception du site est maintenant terminée pour toutes les pages. Dans les sections suivantes de ce tutoriel, vous allez apprendre à ajouter les touches finales et à publier le site sous la forme d’une version d’évaluation gratuite.

 Incorporation de code HTML sur vos pages Adobe Muse

Vous pouvez incorporer du code HTML dans les pages de votre site pour ajouter des fonctions plus complexes qui s’affichent dynamiquement à partir d’un serveur web tiers. Ces blocs de code peuvent être copiés à partir de plusieurs fournisseurs de service web, tels que Google, Yahoo, YouTube et beaucoup d’autres, puis facilement collés dans des pages Muse. Dans cette section, vous allez examiner deux exemples différents de code HTML incorporé et voir comment vous pouvez rapidement ajouter du contenu de médias sociaux et une carte Google interactive à un site web construit dans Muse.

Vous allez d’abord terminer le contenu de la page d’accueil. Si vous avez suivi les étapes précédentes, la page d’accueil peut être déjà ouverte dans le mode Conception. Si ce n’est pas le cas, double-cliquez sur la vignette de page d’accueil dans le mode Plan pour l’ouvrir dans le mode Conception à des fins d’édition. Vous allez ajouter le code HTML incorporé dans la partie supérieure du diaporama que vous avez déjà ajouté à la page d’accueil.

Ajout d’un flux Twitter de code HTML incorporé pour afficher les dernières publications

Vous pouvez configurer un compte gratuit avec de nombreux services web, notamment Twitter, qui vont vous permettre de publier des messages qui s’affichent sur leur site web. Toutefois, en plus de l’affichage des informations sur Twitter.com, vous pouvez utiliser votre compte pour vous connecter et copier le code incorporé pour afficher les mêmes messages sur un site web que vous créez.

Dans cet exemple, un compte fictif a été configuré pour Kevin’s Koffee Kart. Cela implique la connexion dans Twitter en tant que nouvel utilisateur et le remplissage d’un formulaire d’enregistrement. Après cela, vous pouvez utiliser l’interface du site pour publier des messages et copier le code incorporé qui vous permet de l’afficher n’importe où ailleurs sur le web. C’est le même processus que vous allez utiliser pour partager des publications de blog, du contenu vidéo, des flux RSS, des informations boursières, des prévisions météorologiques, des scores de jeux et bien d’autres types de données dynamiques. Si vous créez un site pour un client, demandez-lui s’il utilise déjà ces services pour partager des informations avec ses clients. Dans de nombreux cas, vous pouvez utiliser leurs informations de compte pour vous connecter, puis obtenir le code d’intégration pour les données que vous souhaitez afficher.

Pour éliminer la nécessité de vous connecter à Twitter pour créer votre propre compte, voici le code incorporé et copié depuis Twitter pour l’entreprise Kevin’s Koffee Kart :

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Texte d’espace réservé facultatif</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

La page d’accueil est presque terminée. Il n’y a qu’un seul dernier élément à ajouter à la page.

Lorsque vous avez fini de vérifier la page d’accueil, cliquez sur le lien du plan pour revenir au mode Plan.

Vous allez ensuite ajouter un autre type de code HTML incorporé à la page KART MAP.

Utilisation de code HTML incorporé pour insérer une carte Google sur votre page web Muse

Tutoriel vidéo

Dans cette section, vous allez ajouter du contenu dans la page KART MAP en ajoutant du code HTML incorporé qui charge une carte générée par Google Maps. Ce n’est qu’un petit exemple parmi les nombreuses possibilités qu’offre l’utilisation de contenu HTML incorporé sur votre site. Vous pouvez par exemple incorporer du contenu provenant de nombreux autres sites tiers, notamment YouTube, Flickr ou Picasa, ainsi que des formulaires, des blogs et d’autres fonctions complexes de site que vous pouvez contrôler en accédant à votre compte et en publiant du contenu sur les sites correspondants.

Ajout d’iframes à votre site pour afficher d’autres pages du site avec du code HTML incorporé

Outre l’utilisation de code HTML incorporé pour insérer du code collé à partir d’un site web tiers, vous pouvez également incorporer une page web complète dans un iframe en utilisant la même méthode. Vous pouvez, par exemple, saisir un fragment de code tel que celui qui suit :

<iframe title="Un titre pour ce contenu" src="http://votreurlici.com" width="900" height="500" style="border: 0;"></iframe>

Dans le code ci-dessus, remplacez le texte dans le titre="" et url="" par le titre et l’URL de la page web externe de votre choix. Vous pouvez également personnaliser la largeur et la hauteur de la fenêtre iframe avec les valeurs de votre choix pour qu’elles correspondent à la conception de votre site.

Si vous le souhaitez, vous pouvez également ajouter un attribut garantissant que l’iframe n’affichera pas de barre de défilement en ajoutant ceci à la balise d’ouverture iframe :

scrolling="no"

En choisissant Objet > Insérer du code HTML, vous pouvez ouvrir une nouvelle fenêtre Code HTML et incorporer un iframe n’importe où sur votre site, puis définir n’importe quelle adresse URL (adresse de site, comme www.google.com) pour y afficher un site présent en direct sur Internet.

Vous pouvez également utiliser un iframe pour incorporer de l’animation, comme des animations HTML5 créées dans Adobe Edge. Recherchez le nom du fichier HTML créé par Adobe Edge et utilisez ce nom de fichier dans l’attribut URL de votre iframe :

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Vous devez ensuite télécharger le fichier HTML d’Adobe Edge (et les fichiers dépendants) sur le même serveur hôte, avec vos fichiers de site Muse. Si vous exportez votre site sur FTP, vous pouvez copier le fichier HTML dans le dossier généré par Muse lors de l’exportation. Si vous publiez directement sur les serveurs d’hébergement Adobe Business Catalyst® en cliquant sur le lien de publication dans Muse, vous pouvez utiliser le programme Adobe Dreamweaver® ou tout autre client FTP pour télécharger les fichiers. Pour en savoir plus sur le téléchargement de fichiers via FTP sur les serveurs d’hébergement Business Catalyst, voir Publication de sites web.

Formatage des éléments du formulaire de contact

Grâce à certaines règles CSS standard, vous pouvez formater les éléments du formulaire de contact que vous avez créé dans l’interface de la console d’administration Business Catalyst. Vous pouvez ajuster la manière dont le formulaire et ses éléments s’affichent, pour qu’ils correspondent à la conception de vos pages.

Après avoir collé le code source du formulaire à partir de la console d’administration dans la page dans Muse, le formulaire s’affiche avec les styles par défaut.

A l’instar de tout autre élément, vous pouvez utiliser les poignées latérales pour redimensionner le formulaire et le déplacer autour de la page vers l’emplacement souhaité.

Cliquez avec le bouton droit de la souris (ou en appuyant sur la touche Ctrl) sur le formulaire, puis sélectionnez HTML dans la liste qui s’affiche.

La fenêtre de code HTML s’affiche. Cette option affiche le code que vous avez collé dans la page depuis la console d’administration. Placez le curseur dans la partie supérieure, avant la première ligne de code et appuyez sur la touche Entrée (Windows) ou Retour (Mac) plusieurs fois pour déplacer le code de formulaire et faire de la place pour ajouter les styles.

Cette zone située au-dessus du code de formulaire est l’endroit où vous pouvez coller ou taper les règles CSS qui affectent l’aspect des éléments du formulaire.

Pour voir comment cela fonctionne, copiez le code ci-dessous :

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Collez le code dans la partie supérieure de la fenêtre HTML, au-dessus du formulaire.

Cliquez sur OK pour fermer la fenêtre HTML. Vous remarquez que l’aspect du formulaire est mis à jour à l’aide de la nouvelle mise en forme. Cliquez sur le bouton Aperçu ou choisissez la commande Fichier > Prévisualiser la page dans le navigateur pour voir comment elle va s’afficher dans le site publié.

Vous pouvez utiliser la même stratégie pour contrôler un grand nombre d’éléments qui sont inclus lorsque vous ajoutez le code du formulaire de contact que vous avez copié depuis Business Catalyst.

Prenez un moment pour revoir le code que vous avez collé dans la partie supérieure de la fenêtre. Notez les deux balises de style en haut et en bas des règles CSS qui les entourent. Cela est important, car sans les balises d’ouverture et de fermeture de style, les règles CSS ne fonctionnent pas. Voici les deux balises de style, affichées toutes seules :

<style type="text/css">

</style>

Ces balises d’ouverture et de fermeture de style informent le navigateur que le code qu’elles renferment contient des règles de formatage CSS. Vérifiez toujours que ces balises existent en haut de la fenêtre, avant de coller les règles CSS à l’intérieur.

Si vous souhaitez apporter des modifications à vos éléments de formulaire pour mettre à jour leur aspect, vous devez faire appel à la « classe » (c’est-à-dire le nom attribué aux différents éléments dans le formulaire), spécifier la propriété à mettre à jour, puis définir ses attributs.

Considérons la ligne de code ci-dessous :

input.textarea {

background-color: #fff;

}

Le mot input.textarea est le nom attribué à un type de champ de texte (sa « classe »). Ensuite, la ligne suivante appelle la propriété à modifier. Dans ce cas, background-color fait référence à la couleur d’arrière-plan du champ de texte. Puis après le caractère deux-points, la valeur #fff est une abréviation du code CSS #ffffff (la valeur de couleur hexadécimale qui correspond à la couleur blanc).

En clair, la règle ci-dessus signifie : définir la couleur d’arrière-plan de ce type de champ de texte en blanc.

Pour mettre à jour le formulaire, vous pouvez aussi assigner la couleur d’arrière-plan du champ de texte à une valeur de couleur web courante : le rouge. Le code ci-dessous définit la couleur d’arrière-plan de ce type de champ de texte sur rouge :

input.textarea {

background-color: red;

}

Les règles CSS sont écrites dans leur propre langue. A l’instar de l’apprentissage de toute nouvelle langue, il faut de la pratique pour l’utiliser couramment. Pour plus d’informations sur la syntaxe (la grammaire utilisée pour écrire ces règles) lisez les tutoriels excellents et les guides de référence CSS fournis en ligne gratuitement par W3Schools.

Une fois que vous êtes prêt à commencer à modifier vos propres formulaires de contact, vous pouvez utiliser la liste ci-dessous pour identifier le nom de la classe et les propriétés associées que vous pouvez régler pour chaque élément de formulaire.

<style type="text/css">

</style>

Suppression des éléments par défaut de la partie supérieure du formulaire de contact

Par défaut, lorsque vous collez le formulaire dans la page, il commence avec les deux éléments suivants.

Pour supprimer l’un ou l’autre ou les deux de ces éléments, ouvrez la fenêtre HTML et étudiez le code source que vous avez collé (directement sous la balise de styles CSS que vous avez peut-être ajoutée).

Pour supprimer la ligne *Required (« Requis »), localisez cette ligne de code et supprimez-la :

<span class="req">*</span> Required

Pour supprimer le libellé et le menu Title (« Titre »), localisez ces lignes de code et supprimer les :

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Liste des classes et propriétés pour ajouter des règles CSS et mettre en forme des formulaires de contact

Lorsque vous affectez des valeurs de couleur, vous disposez d’une bien plus grande variété de couleurs si vous utilisez un outil en ligne, tels que kuler ou un programme d’édition d’image (Photoshop ou Fireworks), pour créer des valeurs de couleur hexadécimales. Les valeurs de couleur hexadécimales commencent toujours par le symbole #, suivi d’une combinaison de 3 ou 6 caractères alphanumériques (de 0 à 9 et de A à F).

Vous trouverez peut-être qu’il est plus facile d’utiliser l’outil Pipette dans Muse pour sélectionner des couleurs depuis votre conception existante. Vous pouvez copier les valeurs de couleur hexadécimales depuis le champ dans le sélecteur de couleurs et les coller dans le code. Cependant, les 16 couleurs web suivantes peuvent être spécifiées par leurs noms. Ceci peut s’avérer très utile lorsque vous voulez tester une règle :

Aqua (aigue-marine), Black (noir), Blue (bleu), Fuchsia (fuchsia), Gray (gris), Green (vert), Lime (citron vert), Maroon (bordeaux), Navy (bleu marine), Olive (vert olive), Purple (violet), Red (rouge), Silver (argent), Teal (sarcelle), White (blanc) and Yellow (jaune)

Lorsque vous définissez les couleurs par nom, n’incluez pas le symbole # avant la couleur.

La liste suivante n’est pas exhaustive, il existe de nombreuses combinaisons (et de nombreuses autres propriétés que vous pouvez utiliser) pour affecter les éléments. Utilisez ces suggestions pour commencer. Double-cliquez pour sélectionner un fragment de code, puis copiez-le dans le presse-papiers.

Pour plus de conseils sur l’utilisation de Muse, rendez-vous sur la page d’aide et de tutoriels de Muse ou sur la page des événements Muse pour accéder à des webinaires en temps réel ou enregistrés.