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

Tutoriel google sites

Embed Size (px)

DESCRIPTION

Tutoriel google sitesMerci de citer l'auteur de cette ressource : [email protected]

Citation preview

Page 1: Tutoriel google sites

Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon

Tutoriel Google SitesGoogle 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 GoogleSi 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

Page 2: Tutoriel google sites

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

Page 3: Tutoriel google sites

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

Page 4: Tutoriel google sites

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

Page 5: Tutoriel google sites

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

Page 6: Tutoriel google sites

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.

6

Page 7: Tutoriel google sites

Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon

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.

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

 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

7

Page 8: Tutoriel google sites

Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon

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èresCette 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 horizontalesCette 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

Page 9: Tutoriel google sites

Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon

Insérer des agendasVoici 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

Page 10: Tutoriel google sites

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 souhaitez insérer la feuille de calcul puis cliquez sur Insérer/Feuille de calcul.

10

Page 11: Tutoriel google sites

Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon

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