Tutoriel google sites

1,917
-1

Published on

Tutoriel google sites

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

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Bonjour. Je voudrais savoir s'il est possible de réaliser un menu contextuel via Google site ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,917
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
79
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Tutoriel google sites

  1. 1. 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 dun site web, directement hébergé et gratuit, enquelques clics.Lespace proposé saccompagne de fonctionnalités complémentaires non dénuées dintérêt, telles que des volumesde stockage importants pour la messagerie électronique, des filtres antispam, des agendas partagés, dessolutions de partage de documents entre plusieurs utilisateurs et en temps réel, et des services de messagerieinstantanée.Google Sites est recommandé pour la réalisation dun intranet dentreprise ou celle dun site web familial. Vouspourrez, bien entendu, lui trouver de nombreuses autres applications : un enseignant pourra, par exemple, utiliserGoogle Sites pour y déposer ses cours, recevoir les travaux de ses élèves et disposer dun espace collaboratif trèsefficace.Vous allez découvrir dans ce qui suit comment ouvrir un tel site et comment sopèrent les manipulationsessentielles, telles que la création des pages, linsertion dobjets dans celles-ci ou encore la création de liens denavigation permettant au visiteur de parcourir votre site. Le service Google Sites est très riche en fonctionnalités.Nous décrirons les principales dentre elles, les plus répandues dans le monde du Web 2.0, pour vous permettredassimiler des mécanismes que vous pourrez ensuite facilement reproduire sur dautres espaces identiques, telsque Facebook, MySpace, Blogger ou Skyrock.Depuis votre navigateur Internet, connectez-vous à ladresse www.google.com/sites. La connexion à Google SitesCréation dun compte GoogleSi vous ne disposez pas dun compte Google, voici la procédure qui vous permettra den créer un. Cliquez sur le lien Inscrivez-vous à Sites. La page Créer un compte saffiche.La page Créer un compte 1
  2. 2. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichon Saisissez votre adresse e-mail ainsi quun mot de passe associé (ces paramètres vous permettront à lavenir daccé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 deffectuer des inscriptions intempestives. Lisez ensuite les conditions dutilisation et cochez la case indiquant que vous avez effectué cette action. Cliquez enfin sur le bouton Jaccepte Créer un compte.Continuez la procédure dinscription jusquà son terme. 2
  3. 3. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonCréation dun site web avec Google Sites :Allez à l’adresse https://sites.google.com/ ou tapez google sites en mots clés sur GoogleConnectez-vous : saisissez ladresse e-mail associée à ce compte et le mot de passe rattaché puiscliquez sur le bouton Connexion.La page Créer un site saffiche. La page Créer un site - Google SitesDans la zone Nom de votre site, saisissez le nom qui sera utilisé pour accéder à votre site. La zone Nom de votre site - Google SitesNotez que lURL 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 loption Toutle monde peut consulter ce site si le site est ouvertà tout public ou loption Seules les personnes queje choisis peuvent consulter ce site dans le casdun intranet réservé aux salariés dune entreprise,par exemple.Cliquez sur +, à gauche de la rubrique Choisir unthème.De nombreuses vignettes, symbolisant les thèmesproposés, sont alors affichées.Faites votre choix en cliquant sur lune dentreelles.Dans la zone Veuillez entrer le code affiché, recopiez le code qui vous est présenté puis cliquez sur le bouton Créerun site. 3
  4. 4. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonLa page daccueil de votre site web est affichée. Vous allez maintenant, dans les chapitres qui vont suivre, effectuerquelques modifications caractéristiques qui vous permettront de comprendre comment fonctionne le site. La page daccueil de votre site Google SitesTant que vous restez connecté (cest-à-dire tant que vous navez pas cliqué sur le lien Déconnexion, présenté en hautet à droite de la page affichée dans la fenêtre de votre navigateur), vous disposez doutils dadministrationaccessibles par divers liens placés en haut de la page.À titre dexemple, vous allez modifier quelques paramètres généraux de votre site.Cliquez sur le bouton PLUS (Plus dactions) / Gérer le site puis sur Partage, à la rubrique Paramètres dusite. Laccès à la gestion du site - Google Sites La page Options de partage du site est affichée. Cest dans cette page que vous pouvez définir déventuelles restrictions daccès au site. Les adresses e-mail des internautes à qui vous souhaitez affecter des droits daccès doivent être ajoutées dans lazone Invitez dautres utilisateurs sur votre site. Vous indiquerez également sils sont de simples lecteurs,des collaborateurs ou des propriétaires du site et leur affecterez ainsi des droits plus ou moins étendusquant à la gestion du site. 4
  5. 5. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonRevenir à la page de départ de linterface dadministrationÀ tout moment, vous pouvez retrouver la page initiale de linterface dadministration de votre site encliquant 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 deles 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 quil seramis 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 dactions/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éslors de louverture du service. 5
  6. 6. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonVoici les principaux paramètres du site que vous pouvez modifier :- le nom et la description du site ;- lactivation ou la désactivation de la case indiquant que le site est réservé aux adultes ;- la possibilité dactiver les services Google Analytics et une zone permettant de saisir la balise fourniedans ce cas aux webmestres pour prouver leur titre de propriété sur le site ;- le choix de la langue pour lenvoi des e-mails.Si vous avez effectué des modifications, cliquez sur le bouton Enregistrer les modifications puis revenezau site par le lien Revenir au siteInsertion dobjets 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 dactions qui lui est attachée. La liste dactions proposées lorsque vous cliquez sur le bouton Insérer 6
  7. 7. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonChoisissez Image dans la liste. La fenêtre Ajouter une image saffiche.Deux solutions soffrent alors à vous.Soit le fichier image à insérer se trouve sur votre ordinateur. Choisissez alors loption Images importées dans lafenêtre Ajouter une image puis cliquez sur Parcourir à la rubrique Importer une image. Sélectionnez alors le fichiersur votre ordinateur et cliquez sur le bouton Ouvrir.Une vignette représentant limage saffiche dans la fenêtre Ajouter une image.Cliquez sur le bouton OK.Limage est insérée dans le texte de la page et ses attributs de mise en forme sont affichés à côté delle dans léditeurde page web.Lattribut Aligner permet dobtenir trois types dalignements de limage : à gauche, centré et à droite.Lattribut Taille permet daffecter trois types de tailles à limage.Lattribut Texte intégré permet, quant à lui, de placer le texte de la page autour de limage.Grossissement de limageLorsque la taille de limage est augmentée par cette méthode, le nombre de points (ou pixels) qui la composentnaugmente pas. On constate donc une dégradation de la qualité daffichage de limage. Pour effectuer legrossissement, il est donc toujours préférable de changer la taille de limage depuis un logiciel de traitementinfographique, tel que Photoshop, et dinsé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 à lendroit où doit avoir lieu linsertion puis cliquez sur le bouton Insérer pour dérouler laliste dactions qui lui est attachée.Choisissez Image dans la liste.La fenêtre Ajouter une image saffiche.Choisissez loption Adresse web (URL) dans la fenêtre Ajouter une image puis saisissez ou collez ladresse delimage dans la zone URL de limage de la fenêtre. Cliquez sur OK.Limage est insérée dans la page.Notez que si limage est modifiée ou supprimée dans le site dorigine, elle ne sera plus affichée correctement dansvotre site. Cette technique est donc à réserver, par exemple, lors déchanges de bannières publicitaires : lewebmestre du site pour lequel vous êtes annonceur peut ainsi effectuer des modifications de limage sans quelopération génère pour vous des travaux supplémentaires.Copier facilement ladresse dune image sur un site webLa saisie de ladresse dune image placée sur un site web est fastidieuse et la probabilité deffectuer une faute defrappe est importante, puisquelle est du type : www.lenomdusite.fr/lenomdudossier/lenomdelimage.jpg. Vouspouvez vous simplifier la tâche : cliquez du bouton droit sur limage du site visité, depuis Internet Explorer, puischoisissez Propriétés dans le menu contextuel qui souvre, et enfin copiez ladresse de limage depuis lazone Adresse (URL) dans la fenêtre Propriétés qui saffiche. Depuis le navigateur Firefox, laction seffectue par unclic droit sur limage puis en choisissant Copier ladresse de limage dans le menu contextuel qui apparaît. 7
  8. 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 (etutilisez le bouton Modifier la page pour retrouver le mode Édition).Insérer une table des matièresCette fonctionnalité, sophistiquée et efficace, apporte une toucheprofessionnelle à vos pages et augmente leur lisibilité, pour leshumains comme pour les robots des moteurs de recherche.Elle sappuie sur la hiérarchie de titres que vous pouvez appliquer auxparagraphes par le bouton Format de léditeur de page de Google Sites.Ajoutez quelques titres tels que "Chapitre 1", "Chapitre 2" dans votretexte.Affectez des niveaux hiérarchiques à ces titres : cliquez sur lun dentreeux puis sur le bouton Format et affectez un niveau hiérarchique detitre au paragraphe. Répétez lopération sur les autres titres.Cliquez dans la page à lendroit où vous souhaitez insérer la table desmatières puis activez le bouton Insérer/Table des matières.La fenêtre Insérer : Table des matières saffiche.Conservez les options proposées dans la fenêtre et cliquez sur lebouton Enregistrer. Lobjet est inséré dans la page. Ajustez ses attributs de mise en forme (alignement, intégration au texte) comme vous lavez 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 quelle renferme pourse positionner directement dans la partie du texte correspondante, ce qui est particulièrement utile avec de longstextes.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 desparagraphes.En mode modification de la page, cliquez dans le texte à lendroit où voussouhaitez insérer la ligne horizontale puis activez le bouton Insérer/Lignehorizontale. 8
  9. 9. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonInsérer des agendasVoici une fonction dun très grand intérêt, si vousutilisez le site dans le cadre dun intranet par exemple,et que vous souhaitiez partager un ou plusieurs agendasavec vos collègues, clients, fournisseurs ou amis.Votre agenda doit avoir été créé au préalable sur votrecompte Google. Si tel nest pas le cas, connectez-vous àladresse www.google.fr/ puis cliquez sur lelien Connexion.Cliquez ensuite sur le lien Mon compte puis sur Plus etenfin sur Agenda.Votre agenda Google saffiche. À la rubrique Mes agendas, cliquez sur Paramètres puis, sous longlet Agendas, sur le nom de lagenda que vous souhaitez intégrer. Longlet Détails de lagenda 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 siteGoogle dans laquelle vous souhaitez insérer lagenda, cliquezdans la page à lendroit où devra être inséré lagenda et activezle menu Insérer/Agenda.La fenêtre Insérer : Agenda Google saffiche.Dans la zone Collez lURL de votre agenda, collez le codeprécédemment copié. Cliquez ensuite sur lebouton Enregistrer, en bas de la fenêtre.Lobjet agenda saffiche dans la page en mode Modification,accompagné de ses propriétés dalignement et de mise enforme, comme vous lavez déjà vu lors de linsertion desprécédents objets.Quittez le mode Modification de la page en cliquant sur lebouton Enregistrer pour visualiser le résultat final. 9
  10. 10. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno PichonInsérer des feuilles de calcul, des documents ou des présentationsLe service Google Sites na de cesse de vous surprendre. En voicipour preuve quelques composants encore plus étonnants quil vousest possible dintégrer dans votre site…Google permet la création en ligne des types de documents les plusrépandus : feuille de calcul, document texte ou encore présentationsous forme de diaporama, par exemple.Ces documents peuvent rester dans lespace que vous alloue Google,être partagés dynamiquement avec vos amis ou collaborateurs ouencore être consultés sur votre site Google.Démonstration…À titre dexemple, vous allez commencer par créer une feuille decalcul depuis le service Google. Puis vous intégrerez celle-ci dans lapage daccueil de votre site.Connectez-vous à ladresse www.google.fr/À la rubrique Découvrez dautres services, cliquez sur Plus ” puis surDocuments.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 lebouton Partager, placé en haut à droite de la page.Affectez-lui un nom dans la boîte de dialogue quisaffiche et cliquez sur le bouton OK.Cliquez sur le bouton Accueil puis sur le lien Plus etenfin sur Sites pour retourner à votre site Google.Cliquez ensuite sur le lien affichant le nom de votresite.De retour sur la page daccueil de votre site, cliquezsur le bouton Modifier la page.Placez-vous dans la page à lendroit où vous 10
  11. 11. Réaliser un site web pour non informaticien : Google Sites EXPERNET - Bruno Pichonsouhaitez insérer la feuille de calcul puis cliquez sur Insérer/Feuille de calcul.La fenêtre Insérer saffiche.Dans la fenêtre Insérer, sélectionnez le nom de la feuille de calcul que vous souhaitez insérer dans la page puiscliquez sur le bouton Sélectionner.La fenêtre Insérer : Feuille de calcul Google saffiche.Conservez les options proposées et cliquez sur le bouton Enregistrer.Lobjet feuille de calcul est affiché dans la page en mode Modification, accompagné de ses propriétés dalignementet de mise en forme, comme vous lavez déjà vu lors de linsertion 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 dautres documents, tels que des documents texte, desdiaporamas 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é à lessor du Web 2.0. Ils rendent les contenus des sites plus attractifset apportent une dimension supplémentaire au texte et à limage.Beaucoup dinternautes vidéastes choisissent de stocker leurs fichiers vidéo sur des sites de partage telsque Dailymotion (www.dailymotion.com/fr), Youtube (www.youtube.com) ou encore Googlevidéo (http://video.google.fr/).Rendez-vous sur le site de Youtube en saisissant ladressewww.youtube.com dans la barre dadresse de votre navigateurInternet.Visionnez la vidéo de votre choix sur le site de Youtube puissé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 droitet en choisissant Copier dans le menu contextuel qui souvre.Retournez sur la page daccueil de votre site Google, en mode Modification, comme vous lavez déjà faitprécédemment, et cliquez dans la page à lendroit où vous souhaitezinsérer la vidéo.Cliquez sur Insérer/Vidéo/YouTube.La fenêtre Insérer : Vidéo YouTube saffiche.Dans la zone Collez lURL de votre vidéo YouTube, collez le codeprécédemment copié : cliquez du bouton droit etchoisissez Coller dans le menu contextuel qui souvre.Modifiez éventuellement la zone Inclure un titre pour personnaliser le titre qui sera affiché à côté de la vidéo etcliquez 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

×