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. |
(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 une table des matières
Insérer des lignes horizontales
Insérer des feuilles de calcul, des documents ou des présentations
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.
- 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.
Les Formations de MOSAIQUE Informatique Nancy : formation Indesign à Nancy |
- L'attribut Taille permet d'affecter trois types de tailles à l'image.
Grossissement de l'imageLorsque 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 |
- L'attribut Texte intégré permet, quant à lui, de placer le texte de la page autour de l'image.
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'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 webLa 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.
Les Formations de MOSAIQUE Informatique 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.
Formations photo et vidéo à Nancy (54) |
||
- 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.
- Pour visualiser le résultat final, cliquez sur le bouton Enregistrer.
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.
Les Formations de MOSAIQUE Informatique Nancy : formation Illustrator |
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.
- À 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'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.
- 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.
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.
- Quittez le mode Modification de la page en cliquant sur le bouton Enregistrer pour visualiser le résultat final.
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.
- Cliquez sur Nouveau/Feuille de calcul.
Un nouvel onglet est ouvert. Il renferme une feuille de calcul vierge.
Utilisation du tableurNous 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.
- 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.
- 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.
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.
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 PicasaCe 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.
- 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.
- 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 tableau est inséré dans la page.
- Placez quelques paragraphes dans les cellules à titre d'exemple puis cliquez sur le bouton Enregistrer pour visualiser le résultat.
- 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.
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). |
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.