Tutoriel google sites Merci de citer l'auteur de cette ressource : contact@brunopichon.fr

1. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
Tutoriel Google Sites
Google Sites est un service de Google. Il permet la création d'un site web, directement hébergé et gratuit, en
quelques clics.
L'espace proposé s'accompagne de fonctionnalités complémentaires non dénuées d'intérêt, telles que des volumes
de stockage importants pour la messagerie électronique, des filtres antispam, des agendas partagés, des
solutions de partage de documents entre plusieurs utilisateurs et en temps réel, et des services de messagerie
instantanée.
Google Sites est recommandé pour la réalisation d'un intranet d'entreprise ou celle d'un site web familial. Vous
pourrez, bien entendu, lui trouver de nombreuses autres applications : un enseignant pourra, par exemple, utiliser
Google Sites pour y déposer ses cours, recevoir les travaux de ses élèves et disposer d'un espace collaboratif très
efficace.
Vous allez découvrir dans ce qui suit comment ouvrir un tel site et comment s'opèrent les manipulations
essentielles, telles que la création des pages, l'insertion d'objets dans celles-ci ou encore la création de liens de
navigation permettant au visiteur de parcourir votre site. Le service Google Sites est très riche en fonctionnalités.
Nous décrirons les principales d'entre elles, les plus répandues dans le monde du Web 2.0, pour vous permettre
d'assimiler des mécanismes que vous pourrez ensuite facilement reproduire sur d'autres espaces identiques, tels
que Facebook, MySpace, Blogger ou Skyrock.
Depuis votre navigateur Internet, connectez-vous à l'adresse www.google.com/sites.
La connexion à Google Sites
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.
Cliquez sur le lien Inscrivez-vous à Sites. La page Créer un compte s'affiche.
La page Créer un compte
1

2. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
Saisissez votre adresse e-mail ainsi qu'un mot de passe associé (ces paramètres vous permettront à l'avenir d'accéder
au service).
Bien que cela ne soit pas obligatoire, nous vous conseillons, pour des raisons de sécurité et de confidentialité, de
décocher les cases Rester connecté et Activer le service Historique web.
La saisie de votre adresse e-mail et de votre mot de passe - Google Sites
Dans les zones suivantes de la page, indiquez votre pays et recopiez le code de contrôle, destiné à empêcher les
robots d'effectuer des inscriptions intempestives. Lisez ensuite les conditions d'utilisation et cochez la case
indiquant que vous avez effectué cette action.
Cliquez enfin sur le bouton J'accepte Créer un compte.
Continuez la procédure d'inscription jusqu'à son terme.
2

3. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
Création d'un site web avec Google Sites :
Allez à l’adresse https://sites.google.com/ ou tapez google sites en mots clés sur Google
Connectez-vous : saisissez l'adresse e-mail associée à ce compte et le mot de passe rattaché puis
cliquez sur le bouton Connexion.
La page Créer un site s'affiche.
La page Créer un site - Google Sites
Dans la zone Nom de votre site, saisissez le nom qui sera utilisé pour accéder à votre site.
La zone Nom de votre site - Google Sites
Notez que l'URL du site sera du type http://sites.google.com/site/votrenomdesite.
Dans la zone Description du site, saisissez une brève description du site.
Cliquez sur +, à gauche de la rubrique Autres options.
Des paramètres complémentaires sont affichés.
Si le contenu du site est réservé aux adultes,
cochez la case Le contenu de ce site est réservé à
un public adulte.
Dans la zone Partager avec, cochez l'option Tout
le monde peut consulter ce site si le site est ouvert
à tout public ou l'option Seules les personnes que
je choisis peuvent consulter ce site dans le cas
d'un intranet réservé aux salariés d'une entreprise,
par exemple.
Cliquez sur +, à gauche de la rubrique Choisir un
thème.
De nombreuses vignettes, symbolisant les thèmes
proposés, sont alors affichées.
Faites votre choix en cliquant sur l'une d'entre
elles.
Dans la zone Veuillez entrer le code affiché, recopiez le code qui vous est présenté puis cliquez sur le bouton Créer
un site.
3

4. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
La page d'accueil de votre site web est affichée. Vous allez maintenant, dans les chapitres qui vont suivre, effectuer
quelques modifications caractéristiques qui vous permettront de comprendre comment fonctionne le site.
La page d'accueil de votre site Google Sites
Tant que vous restez connecté (c'est-à-dire tant que vous n'avez pas cliqué sur le lien Déconnexion, présenté en haut
et à droite de la page affichée dans la fenêtre de votre navigateur), vous disposez d'outils d'administration
accessibles par divers liens placés en haut de la page.
À titre d'exemple, vous allez modifier quelques paramètres généraux de votre site.
Cliquez sur le bouton PLUS (Plus d'actions) / Gérer le site puis sur Partage, à la rubrique Paramètres du
site.
L'accès à la gestion du site - Google Sites La page Options de partage du site est affichée.
C'est dans cette page que vous pouvez définir d'éventuelles restrictions d'accès au site. Les adresses e-
mail des internautes à qui vous souhaitez affecter des droits d'accès doivent être ajoutées dans la
zone Invitez d'autres utilisateurs sur votre site. Vous indiquerez également s'ils sont de simples lecteurs,
des collaborateurs ou des propriétaires du site et leur affecterez ainsi des droits plus ou moins étendus
quant à la gestion du site.
4

5. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
Revenir à la page de départ de l'interface d'administration
À tout moment, vous pouvez retrouver la page initiale de l'interface d'administration de votre site en
cliquant sur le lien Nom du site (ex. : Bruno Pichon), présenté en haut et à gauche de la page.
Vous allez appliquer un nouveau thème.
Cliquez sur le lien Thèmes, à la rubrique Gérer le site.
Des vignettes symbolisent les thèmes proposés que vous pouvez visualiser avant de
les appliquer.
Sous la vignette du thème de votre choix, cliquez sur le lien Aperçu (la loupe).
Le résultat est immédiat : une nouvelle fenêtre vous présente votre site, tel qu'il sera
mis en forme si vous appliquez le thème.
Cliquez sur le bouton Fermer, en haut et à droite de la fenêtre de prévisualisation.
Lorsque votre choix est fait, cliquez sur le nom du thème affiché sous la vignette.
Cliquez ensuite sur le bouton Enregistrer les modifications, en haut de la page.
Vous constatez que le thème a été appliqué. Cliquez sur le lien Revenir au site.
Voyons maintenant comment modifier quelques paramètres de base du site.
Cliquez sur Plus d'actions/Gérer le site puis choisissez Général à la rubrique Paramètres du site.
La page Général est affichée. Vous y retrouvez essentiellement les paramètres qui vous ont été présentés
lors de l'ouverture du service.
5

6. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
Voici les principaux paramètres du site que vous pouvez modifier :
- le nom et la description du site ;
- l'activation ou la désactivation de la case indiquant que le site est réservé aux adultes ;
- la possibilité d'activer les services Google Analytics et une zone permettant de saisir la balise fournie
dans ce cas aux webmestres pour prouver leur titre de propriété sur le site ;
- le choix de la langue pour l'envoi des e-mails.
Si vous avez effectué des modifications, cliquez sur le bouton Enregistrer les modifications puis revenez
au site par le lien Revenir au site
Insertion d'objets dans les pages du site :
Créer une nouvelle page : ou Modifiez la page existante :
Insérer des images :
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
6

7. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
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.
L'attribut Taille permet d'affecter trois types de tailles à l'image.
L'attribut Texte intégré permet, quant à lui, de placer le texte de la page autour de l'image.
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.
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 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.
7

8. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
À 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.
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.
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.
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.
8

9. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
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 é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.
9

10. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
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.
Connectez-vous à l'adresse www.google.fr/
À la rubrique Découvrez d'autres services, cliquez sur Plus ” puis sur
Documents.
La page Google Documents est affichée. Dans la négative,
recommencez la procédure en relançant le navigateur.
Cliquez sur Nouveau/Feuille de calcul.
Un nouvel onglet est ouvert. Il renferme une feuille de calcul vierge.
Créez une petite feuille de calcul renfermant quelques cellules.
Enregistrez la feuille en cliquant sur le
bouton Partager, 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
10

11. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon
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.
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/).
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.
11