Tutoriel webmestre : créer un site web avec Google Sites - Insérer des objets dans une page

Cet article fait suite à l'article "Tutoriel Google Sites - Modifier la mise en forme de la page d'accueil".

L'éditeur de page de Google Sites dispose de nombreuses fonctionnalités Web 2.0 et d'autres, plus classiques, qu'il vous est possible d'insérer dans les pages très facilement. Vous allez découvrir comment en utiliser quelques-unes dans ce qui suit.

Google Sites - Tuto - MOSAIQUE Informatique - 54 - Nancy

(Les conditions d'utilisation de ces informations sont consultables en cliquant sur ce lien).

Tutoriel Google Sites : insertion d'objets dans les pages du site

Sommaire :

Insérer des images

Insérer une table des matières

Insérer des lignes horizontales

Insérer des agendas

Insérer des feuilles de calcul, des documents ou des présentations

Insérer des vidéos

Insérer des tableaux

Présenter la page sur deux colonnes

Insérer des images

  • Placez-vous dans la page à l'endroit où doit avoir lieu l'insertion puis cliquez sur le bouton Insérer pour dérouler la liste d'actions qui lui est attachée.

La liste d'actions proposées lorsque vous cliquez sur le bouton Insérer

  • Choisissez Image dans la liste.

La fenêtre Ajouter une image s'affiche.

Deux solutions s'offrent alors à vous.

  • Soit le fichier image à insérer se trouve sur votre ordinateur. Choisissez alors l'option Images importées dans la fenêtre Ajouter une image puis cliquez sur Parcourir à la rubrique Importer une image. Sélectionnez alors le fichier sur votre ordinateur et cliquez sur le bouton Ouvrir.

Une vignette représentant l'image s'affiche dans la fenêtre Ajouter une image.

  • Cliquez sur le bouton OK.

L'image est insérée dans le texte de la page et ses attributs de mise en forme sont affichés à côté d'elle dans l'éditeur de page web.

  • L'attribut Aligner permet d'obtenir trois types d'alignements de l'image : à gauche, centré et à droite.

Image alignée à gauche dans la page - Joomla

Image centrée dans la page - Google Sites

Image alignée à droite dans la page - Google Sites

Les Formations de MOSAIQUE Informatique Nancy : formation Indesign à Nancy

Formation Indesign perfectionnement - MOSAIQUE Informatique - Nancy - 54 - Meurthe et Moselle - Lorraine

  • L'attribut Taille permet d'affecter trois types de tailles à l'image.

L'attribut S diminue la taille de l'image - Google Sites

À l'inverse, l'attribut G augmente considérablement la taille de l'image (au détriment de sa qualité d'affichage) - Google Sites

Grossissement de l'image

Lorsque la taille de l'image est augmentée par cette méthode, le nombre de points (ou pixels) qui la composent n'augmente pas. On constate donc une dégradation de la qualité d'affichage de l'image. Pour effectuer le grossissement, il est donc toujours préférable de changer la taille de l'image depuis un logiciel de traitement infographique, tel que Photoshop, et d'insérer l'élément visuel avec ses dimensions originelles dans la page.

Les prochaines formations de MOSAIQUE Informatique Nancy

Apprendre à créer une boutique en ligne de commerce électronique - Nancy - 54

  • L'attribut Texte intégré permet, quant à lui, de placer le texte de la page autour de l'image.

L'activation de l'attribut Texte intégré combiné à un alignement à gauche - Google Sites

L'activation de l'attribut Texte intégré combiné à un alignement à droite - Google Sites

Si le fichier image que vous souhaitez intégrer dans votre page ne se trouve pas sur votre ordinateur, mais est déjà en ligne sur un autre site Internet, une autre méthode vous est offerte.

  • Placez-vous dans la page à l'endroit où doit avoir lieu l'insertion puis cliquez sur le bouton Insérer pour dérouler la liste d'actions qui lui est attachée.
  • Choisissez Image dans la liste.

La fenêtre Ajouter une image s'affiche.

  • Choisissez l'option Adresse web (URL) dans la fenêtre Ajouter une image puis saisissez ou collez l'adresse de l'image dans la zone URL de l'image de la fenêtre. Cliquez sur OK.

L'insertion d'une image depuis une adresse Internet - Google Sites

L'image est insérée dans la page.

Notez que si l'image est modifiée ou supprimée dans le site d'origine, elle ne sera plus affichée correctement dans votre site. Cette technique est donc à réserver, par exemple, lors d'échanges de bannières publicitaires : le webmestre du site pour lequel vous êtes annonceur peut ainsi effectuer des modifications de l'image sans que l'opération génère pour vous des travaux supplémentaires.

Copier facilement l'adresse d'une image sur un site web

La saisie de l'adresse d'une image placée sur un site web est fastidieuse et la probabilité d'effectuer une faute de frappe est importante, puisqu'elle est du type : www.lenomdusite.fr/lenomdudossier/lenomdelimage.jpg. Vous pouvez vous simplifier la tâche : cliquez du bouton droit sur l'image du site visité, depuis Internet Explorer, puis choisissez Propriétés dans le menu contextuel qui s'ouvre, et enfin copiez l'adresse de l'image depuis la zone Adresse (URL) dans la fenêtre Propriétés qui s'affiche. Depuis le navigateur Firefox, l'action s'effectue par un clic droit sur l'image puis en choisissant Copier l'adresse de l'image dans le menu contextuel qui apparaît.

  • À chaque modification, pour visualiser le résultat obtenu, cliquez sur le bouton Enregistrer de l'éditeur de page (et utilisez le bouton Modifier la page pour retrouver le mode Édition).

Insérer une table des matières

Cette fonctionnalité, sophistiquée et efficace, apporte une touche professionnelle à vos pages et augmente leur lisibilité, pour les humains comme pour les robots des moteurs de recherche.

Elle s'appuie sur la hiérarchie de titres que vous pouvez appliquer aux paragraphes par le bouton Format de l'éditeur de page de Google Sites.

  • Ajoutez quelques titres tels que "Chapitre 1", "Chapitre 2" dans votre texte.
  • Affectez des niveaux hiérarchiques à ces titres : cliquez sur l'un d'entre eux puis sur le bouton Format et affectez un niveau hiérarchique de titre au paragraphe. Répétez l'opération sur les autres titres.

L'affectation d'un niveau hiérarchique de titre à un paragraphe - Google Sites

Les Formations de MOSAIQUE Informatique Nancy : formation Photoshop à Nancy

Formation Photoshop - Nancy

  • Cliquez dans la page à l'endroit où vous souhaitez insérer la table des matières puis activez le bouton Insérer/Table des matières.

La fenêtre Insérer : Table des matières s'affiche.

  • Conservez les options proposées dans la fenêtre et cliquez sur le bouton Enregistrer.

La fenêtre Insérer : Table des matières - Google Sites

Formations photo et vidéo à Nancy (54)

Formation photo Nancy - 1 jour

Formation photo Nancy - 3 jours

Formation photo Nancy - 6 jours

  • L'objet est inséré dans la page. Ajustez ses attributs de mise en forme (alignement, intégration au texte) comme vous l'avez vu précédemment pour les images.

L'insertion de la table des matières - Google Sites

  • Pour visualiser le résultat final, cliquez sur le bouton Enregistrer.

La table des matières, telle qu'elle est affichée lorsque le site est consulté - Google Sites

La table des matières est un objet interactif en ce sens que le lecteur peut cliquer sur les titres qu'elle renferme pour se positionner directement dans la partie du texte correspondante, ce qui est particulièrement utile avec de longs textes.

  • Cliquez sur un item de la table des matières, "Chapitre 3" par exemple, pour utiliser la fonctionnalité.

Insérer des lignes horizontales

Cette petite fonctionnalité, qui fait appel à une très simple balise HTML (HR, pour Horizontal Rule), permet de tracer une ligne dans le texte pour séparer des paragraphes.

En mode modification de la page, cliquez dans le texte à l'endroit où vous souhaitez insérer la ligne horizontale puis activez le bouton Insérer/Ligne horizontale.

La ligne horizontale permet de séparer deux paragraphes - Google Sites

Les Formations de MOSAIQUE Informatique Nancy : formation Illustrator

Formation Illustrator perfectionnement - Nancy - 54 - Meurthe et Moselle - Lorraine

Insérer des agendas

Voici une fonction d'un très grand intérêt, si vous utilisez le site dans le cadre d'un intranet par exemple, et que vous souhaitiez partager un ou plusieurs agendas avec vos collègues, clients, fournisseurs ou amis.

  • Votre agenda doit avoir été créé au préalable sur votre compte Google. Si tel n'est pas le cas, connectez-vous à l'adresse www.google.fr/ puis cliquez sur le lien Connexion.
  • Cliquez ensuite sur le lien Mon compte puis sur Plus et enfin sur Agenda.

Votre agenda Google s'affiche.

L'agenda Google - Google Sites

  • À la rubrique Mes agendas, cliquez sur Paramètres puis, sous l'onglet Agendas, sur le nom de l'agenda que vous souhaitez intégrer.

L'accès aux paramètres de l'agenda - Google Sites

L'onglet Détails de l'agenda est affiché.

  • À la rubrique Insérez cet agenda, sélectionnez puis copiez (en cliquant du bouton droit puis en sélectionnant Copier) le code fourni par Google.

La sélection du code à insérer dans votre site - Google Sites

  • Retournez, en mode Modification, dans la page de votre site Google dans laquelle vous souhaitez insérer l'agenda, cliquez dans la page à l'endroit où devra être inséré l'agenda et activez le menu Insérer/Agenda.

La fenêtre Insérer : Agenda Google s'affiche.

  • Dans la zone Collez l'URL de votre agenda, collez le code précédemment copié. Cliquez ensuite sur le bouton Enregistrer, en bas de la fenêtre.

Le code de l'agenda est collé - Google Sites

L'objet agenda s'affiche dans la page en mode Modification, accompagné de ses propriétés d'alignement et de mise en forme, comme vous l'avez déjà vu lors de l'insertion des précédents objets.

L'agenda inséré dans la page, ici en mode Modification - Google Sites

  • Quittez le mode Modification de la page en cliquant sur le bouton Enregistrer pour visualiser le résultat final.

L'agenda, tel qu'il sera vu par les visiteurs de votre site - Google Sites

Insérer des feuilles de calcul, des documents ou des présentations

Le service Google Sites n'a de cesse de vous surprendre. En voici pour preuve quelques composants encore plus étonnants qu'il vous est possible d'intégrer dans votre site…

Google permet la création en ligne des types de documents les plus répandus : feuille de calcul, document texte ou encore présentation sous forme de diaporama, par exemple.

Ces documents peuvent rester dans l'espace que vous alloue Google, être partagés dynamiquement avec vos amis ou collaborateurs ou encore être consultés sur votre site Google. Démonstration…

À titre d'exemple, vous allez commencer par créer une feuille de calcul depuis le service Google. Puis vous intégrerez celle-ci dans la page d'accueil de votre site.

Pour simplifier le mode opératoire, nous démarrerons la procédure en étant "non connecté".

  • Si vous êtes connecté aux services de Google, déconnectez-vous au moyen du lien Déconnexion, en haut et à droite de la page. Fermez les fenêtres et onglets de votre navigateur et repartez d'une nouvelle fenêtre.
  • Connectez-vous à l'adresse www.google.fr/ puis cliquez sur le lien Connexion, en haut et à droite de la page. Saisissez l'adresse e-mail et le mot de passe rattaché de votre compte Google. Cliquez enfin sur le lien Mon compte.
  • À la rubrique Découvrez d'autres services, cliquez sur Plus ” puis sur Documents.

La page Google Documents est affichée.

La page Google Documents - Google Sites

  • Cliquez sur Nouveau/Feuille de calcul.

Un nouvel onglet est ouvert. Il renferme une feuille de calcul vierge.

Utilisation du tableur

Nous ne décrirons pas en détail le tableur de Google car nous sortirions largement du sujet de cet ouvrage. Les utilisateurs d'Excel y retrouveront rapidement leurs marques, notamment en ce qui concerne l'écriture des formules.

  • Créez une petite feuille de calcul renfermant quelques cellules.

Cette feuille de calcul va servir d'exemple - Google Sites

  • Enregistrez la feuille en cliquant sur le bouton Enregistrer, placé en haut à droite de la page. Affectez-lui un nom dans la boîte de dialogue qui s'affiche et cliquez sur le bouton OK.

L'enregistrement de la feuille de calcul - Google Sites

  • Cliquez sur le bouton Accueil puis sur le lien Plus et enfin sur Sites pour retourner à votre site Google. Cliquez ensuite sur le lien affichant le nom de votre site.
  • De retour sur la page d'accueil de votre site, cliquez sur le bouton Modifier la page.
  • Placez-vous dans la page à l'endroit où vous souhaitez insérer la feuille de calcul puis cliquez sur Insérer/Feuille de calcul.

La fenêtre Insérer s'affiche.

Dans la fenêtre Insérer, sélectionnez le nom de la feuille de calcul que vous souhaitez insérer dans la page puis cliquez sur le bouton Sélectionner.

La fenêtre Insérer : Feuille de calcul Google s'affiche.

  • Conservez les options proposées et cliquez sur le bouton Enregistrer.

La fenêtre Insérer : Feuille de calcul Google - Google Sites

L'objet feuille de calcul est affiché dans la page en mode Modification, accompagné de ses propriétés d'alignement et de mise en forme, comme vous l'avez déjà vu lors de l'insertion des précédents objets. Vous pouvez les modifier, le cas échéant.

  • Quittez le mode Modification de la page en cliquant sur le bouton Enregistrer pour visualiser le résultat final.

La feuille de calcul, telle qu'elle sera vue par les visiteurs de votre site - Google Sites

Vous pouvez appliquer ce mode opératoire pour insérer d'autres documents, tels que des documents texte, des diaporamas Picasa, des présentations ou encore des formulaires de feuilles de calcul.

Le logiciel Picasa

Ce logiciel, téléchargeable gratuitement sur le site de Google, permet d'effectuer de nombreux types de retouches d'images ainsi que des montages photographiques.

Insérer des vidéos

Les fichiers vidéo ont très largement contribué à l'essor du Web 2.0. Ils rendent les contenus des sites plus attractifs et apportent une dimension supplémentaire au texte et à l'image.

Beaucoup d'internautes vidéastes choisissent de stocker leurs fichiers vidéo sur des sites de partage tels que Dailymotion (www.dailymotion.com/fr), Youtube (www.youtube.com) ou encore Google vidéo (http://video.google.fr/).

Voyons comment insérer un tel fichier dans votre site Google.

  • Rendez-vous sur le site de Youtube en saisissant l'adresse www.youtube.com dans la barre d'adresse de votre navigateur Internet.
  • Visionnez la vidéo de votre choix sur le site de Youtube puis sélectionnez le code qui lui est rattaché dans la zone nommée URL, placée à côté de la vidéo. Copiez ce code en cliquant du bouton droit et en choisissant Copier dans le menu contextuel qui s'ouvre.

Les vidéos sont accompagnées d'un code permettant de les afficher dans une page web - Google Sites

  • Retournez sur la page d'accueil de votre site Google, en mode Modification, comme vous l'avez déjà fait précédemment, et cliquez dans la page à l'endroit où vous souhaitez insérer la vidéo.
  • Cliquez sur Insérer/Vidéo/YouTube.

La fenêtre Insérer : Vidéo YouTube s'affiche.

  • Dans la zone Collez l'URL de votre vidéo YouTube, collez le code précédemment copié : cliquez du bouton droit et choisissez Coller dans le menu contextuel qui s'ouvre.

Le code de la vidéo est collé - Google Sites

  • Modifiez éventuellement la zone Inclure un titre pour personnaliser le titre qui sera affiché à côté de la vidéo et cliquez sur le bouton Enregistrer de la fenêtre.
  • Quittez le mode Modification de la page en cliquant sur le bouton Enregistrer pour visualiser le résultat final.

Insérer des tableaux

Dans une page web, les tableaux sont des zones composées de cellules dans lesquelles vous pouvez placer du texte ou des objets, pour obtenir une disposition normalisée et efficace de certains éléments qui constituent la page.

Vous allez insérer un tableau de trois colonnes sur trois lignes.

  • Cliquez dans la page à l'endroit où vous souhaitez insérer le tableau.
  • Cliquez sur Tableau/Insérer un tableau et sélectionnez un tableau de trois cellules sur trois.

Le paramétrage de la taille du tableau - Google Sites

Le tableau est inséré dans la page.

Le résultat obtenu en mode Modification - Google Sites

  • Placez quelques paragraphes dans les cellules à titre d'exemple puis cliquez sur le bouton Enregistrer pour visualiser le résultat.

Le tableau, tel qu'il sera vu par les visiteurs de votre site - Google Sites

  • Si vous souhaitez modifier le tableau après son insertion (ajouter ou supprimer des lignes ou des colonnes), utilisez les options proposées par le bouton Tableau.

Présenter la page sur deux colonnes

  • Le bouton Mise en page/Deux colonnes vous permet de créer deux colonnes pour donner à la présentation un aspect plus journalistique.

La présentation en deux colonnes - Google Sites

Ces informations sont extraites du livre d'Alain Mathieu et de Dominique Lerond (MOSAIQUE Informatique Nancy) "Créez votre site web" (en vente en librairies et sur le site de Micro Application).

Commander en ligne le livre Créez votre site web (auteurs MOSAIQUE Informatique) chez Micro Application

Toutes les formations de MOSAIQUE Informatique à Nancy (54) et en Lorraine

Formation Illustrator à Nancy (54) : initiation et perfectionnement

Alternative gratuite à Photoshop, Gimp est un excellent logiciel libre de retouche d'image, que nous avons décidé de tester.

Sans plus attendre, voyons

Création d'un compte Google

Si vous ne disposez pas d'un compte Google, voici la procédure qui vous permettra d'en créer un.

2 Cliquez sur le lien Inscrivez-vous à Sites.

La page Créer un compte s'affiche.

comment le télécharger et l'installer.