Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Utilisation de code HTML incorporé pour afficher un blog sur votre site 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>

  1. Dans la vue Plan, double cliquez sur la vignette de la page des événements pour l’ouvrir et la modifier en mode Conception.
  2. 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é.

  1. 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.
Redimensionnez et positionnez la page
Redimensionnez et positionnez le blog Tumblr sur la page des événements.

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 :

  1. 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.

Incorporation d’une vidéo
Après avoir sélectionné le format vidéo de votre choix, copiez le code d’intégration généré par YouTube.

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).

  1. 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.

  1. 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.
  2. 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.
  3. 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.
Menu Fond
Définissez la couleur de fond et l’opacité du conteneur dans le menu Fond.

  1. 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é.
  2. 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.
  3. 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.
  4. 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é
Options de composition
Mettez à jour les paramètres dans le menu Options pour contrôler la façon dont le widget se comporte.

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.

Cliquez sur Créer une carte
Cliquez sur Créer une carte pour générer une carte basée sur les adresses que vous avez saisies.

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.

Ajoutez le code HTML sur votre page
Utilisez l’interface Google Maps pour générer le code HTML de la carte.

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é.

  1. 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>

  1. 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.
  2. 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.

  1. 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.

  1. Choisissez Fichier > Prévisualiser la page dans le navigateur pour voir comment la page de visite s’affiche dans un navigateur.
Page web avec carte
La page de visite finalisée inclut une carte Google entièrement fonctionnelle.

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>

 

  1. Copiez le code affiché ci-dessus.

  2. Revenez à Muse. Dans de nombreux cas, vous pouvez simplement cliquer à l’emplacement souhaité sur la page, faire un clic droit, puis choisir la commande Coller dans le menu contextuel qui s’affiche. Vous pouvez également utiliser les raccourcis clavier (Commande+V pour Mac ou Ctrl+V pour Windows) : Muse reconnaîtra que le texte collé est du code source et non un contenu textuel normal.

    Remarque :

    Dans les rares cas où le code n’est pas reconnu comme HTML, vous pouvez sélectionner Objet > Insérer du code HTML pour ouvrir la fenêtre Code HTML. Collez ensuite simplement dans la fenêtre le code source que vous avez copié, puis cliquez sur OK pour fermer la fenêtre et incorporer le code.

  3. Après incorporation du code source (ce qui en substance crée une fenêtre dans la page du site pour y afficher le contenu lié depuis un site web tiers), l’apparence peut être différente de ce que vous souhaitiez. L’affichage par défaut du contenu Twitter de code HTML incorporé s’affiche.

    Intégration du code source
    Les données du flux Twitter sont affichées comme prévu, mais le style ou le format du texte n’est pas correct.

  4. Pour augmenter la taille de la zone de texte du flux Twitter, cliquez sur les poignées autour du code HTML incorporé et développez-les pour que celui-ci occupe la plus grande partie de la largeur de la page, jusqu’à environ un tiers de la hauteur.

    Extension du champ de code intégré
    Etirez la largeur et la longueur de la fenêtre du flux de données Twitter à une taille bien plus grande.

    Le texte apparaît alors dans espace bien plus grand, même si pour le moment, le texte conserve la taille par défaut.

    Ensuite, vous allez mettre à jour le code dans la fenêtre Code HTML pour ajouter des styles CSS qui vont définir l’apparence du texte dynamique. Cette opération n’affecte pas la manière dont les messages postés s’affichent sur Twitter.com, mais elle va modifier la mise en forme du texte sur votre site.

  5. Copiez le code de style CSS suivant :

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    Remarque :

    Prenez un moment pour vous familiariser avec le code ci-dessus et notez que les styles sont enveloppés dans une balise d’ouverture qui spécifie que le code est () puis une balise de fermeture qui permet aux navigateurs de savoir que les règles de style CSS sont terminées (). Chaque fois que vous appliquez un style à votre propre code HTML incorporé, vous utilisez ces balises comme crochets autour des styles que vous souhaitez affecter. Dans ce cas, le site web de Twitter héberge les messages publiés et utilise un sélecteur d’ID CSS nommé #twitFeed pour contrôler la façon dont le texte s’affiche sur son site. Par conséquent, le code ci-dessus utilise essentiellement ce nom de style (obtenu à partir du site Twitter) puis ajoute certaines règles qui définissent la manière dont le texte s’affiche sur votre site, en remplaçant les styles appliqués par Twitter.com. Pour en savoir plus sur les règles CSS pour le formatage du contenu textuel, rendez-vous sur le site web des écoles W3C.

  6. Cliquez avec le bouton droit de la souris dans la fenêtre Code HTML incorporé et choisissez HTML dans le menu contextuel qui s’affiche. Ceci ouvre la fenêtre Code HTML pour vous permettre de voir le code source que vous avez collé précédemment. A tout moment lors de la modification d’un site, vous pouvez ouvrir cette fenêtre et mettre à jour le contenu source HTML. Cliquez au-dessus du code HTML que vous avez précédemment incorporé, tout en haut de la fenêtre. Collez le nouveau code de style que vous avez copié à l’étape 5.

    Code HTML intégré
    Collez le code de style dans la fenêtre Code HTML, au-dessus du code source Twitter que vous avez collé précédemment.

  7. Cliquez sur OK pour fermer la fenêtre HTML. Une fois cette modification effectuée pour le style du texte Twitter, la publication qui est liée depuis le site Twitter s’affiche sous la forme de texte blanc, d’une taille nettement supérieure, au-dessus de l’affichage du diaporama de la page d’accueil.

    La page web affiche le texte Twitter
    Le flux Twitter est terminé après la mise à jour de la taille de l’objet HTML et la mise en forme des styles de texte.

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

  1. Choisissez Fichier > Importer. Dans la boîte de dialogue Importer, parcourez l’arborescence pour sélectionner le fichier DailyDrip.png dans le dossier Kevins_Koffee_Kart. Cliquez sur Sélectionner.

  2. Une fois l’image importée sur la page d’accueil, utilisez l’outil de sélection pour positionner l’image sur le côté gauche vers l’extrémité supérieure de la diapositive, de façon à ce qu’elle recouvre partiellement la partie supérieure du diaporama.

  3. Cliquez sur Aperçu pour voir le diaporama s’animer et voir comment il s’affiche en dessous des images d’écoulement marron et « Daily Drip ».

    La conception finale de la page d’accueil
    La conception finale de la page d’accueil.

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.

  1. Double-cliquez sur la vignette KART MAP pour ouvrir la page dans le mode Conception et commencer à la modifier.

  2. Utilisez l’outil Texte pour faire glisser un bloc de texte sur la page KART MAP, vers l’extrémité supérieure du contenu de la page, directement au-dessous de l’en-tête.

  3. Entrez la ligne suivante : Vous cherchez la carriole Koffee Kart ? Cette carte vous indique où la trouver tout au long de la journée (mises à jour en temps réel).

  4. Avec le texte sélectionné, ouvrez le panneau Styles de paragraphe. Cliquez sur le style nommé Georgia Body Medium pour appliquer le style de paragraphe au texte de l’en-tête de la page KART MAP.

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

Tutoriel vidéo

Tutoriel vidéo
lynda.com - James Fritz

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.

  1. Ouvrez une nouvelle fenêtre de navigateur et rendez-vous sur Google Maps.

  2. Saisissez une adresse ou un terme de recherche, par exemple Adobe SF, pour trouver un emplacement réel à utiliser pour créer la carte.

  3. Cliquez sur le bouton Lien qui s’affiche dans la partie supérieure droite de l’interface, puis sur l’option de personnalisation et d’aperçu de la carte intégrée.

  4. Dans la fenêtre de personnalisation qui s’affiche, définissez les dimensions personnalisées de la carte avec une largeur de 850 et une hauteur de 470. Repositionnez la carte dans la fenêtre pour vous assurer que le texte de l’adresse est visible dans sa totalité.

  5. Copiez le code HTML résultant depuis la fenêtre de Google. Ou, si vous préférez ne pas générer votre propre code de carte Google, il vous suffit de copier le code source ci-dessous :

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- Pour désactiver le partage d’emplacement, vous *devez* consulter https://www.google.com/latitude/apps/badge et désactiver le badge Google Public Location. Supprimer ce fragment de code ne suffit pas ! -->

    Copiez le code source HTML depuis la fenêtre Google Maps
    Copiez le code source HTML depuis la fenêtre Google Maps.

  6. Revenez à Muse. Cliquez avec le bouton droit de la souris et choisissez Coller pour importer le code. Vous pouvez également sélectionner Objet > Insérer du code HTML pour ouvrir la fenêtre Code HTML, ou utiliser le raccourci clavier standard pour coller le code (Commande+V pour Mac ou Ctrl+V pour Windows).

  7. Utilisez l’outil de sélection pour positionner la carte sur le côté gauche de la page.

  8. Cliquez sur Aperçu pour voir la manière dont les cartes Google s’affichent pour les visiteurs du site en direct. Cliquez sur les boutons de navigation pour la carte et vérifiez qu’elle est entièrement interactive et que vous pouvez effectuer un zoom avant ou vous déplacer dans la carte au sein de la fenêtre incorporée.

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.

Collage dans le code HTML arbitraire
Après le collage dans le code HTML arbitraire, le formulaire s’affiche sur la page.

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.

Utilisez le menu contextuel pour sélectionner HTML
Utilisez le menu contextuel pour sélectionner HTML dans la liste des options.

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.

Appuyez sur Entrée ou sur Retour pour ajouter quelques lignes d’espace au-dessus du code existant
Appuyez sur Entrée ou sur Retour pour ajouter quelques lignes d’espace au-dessus du code existant.

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.

Collez les styles CSS dans la partie supérieure de la fenêtre HTML
Collez les styles CSS dans la partie supérieure de la fenêtre HTML.

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.

Remarque :

N’oubliez pas de toujours entourer votre liste de règles CSS de balises de style d’ouverture et de fermeture, sinon le navigateur (et la vue Conception) ne peut pas fournir un rendu des règles :

<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>

Remarque :

Faites attention, lorsque vous modifiez le code HTML, de ne pas supprimer accidentellement toute balise autre que les lignes indiquées ci-dessus. Retirer ne serait-ce qu’un seul caractère, comme un signe « > » par exemple, risque d’endommager le formulaire. Si cela se produit, vous pouvez revenir à la console d’administration et copier le code pour le recoller dans la page et remplacer celui que vous avez modifié.

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne