Vous êtes sur la page 1sur 84

Tutoriel pour la cration d'un Google Sites

Crer un site web gratuitement avec Google Sites

Le site des tutoriels Google Sites, pour crer gratuitement un site


Google, trucs et astuces, best practice et info technique pour Google
Sites, Gmail, Google Agenda, YouTube, Picasa, Google Maps, Google
Reader, Google Groups, Google Document...

Rejoignez
Rejoignez-nous
sur Facebook
http://www.facebook.com/home.php?sk=group_229378610412541

TECHNOCONSEIL | www.technoconseil.fr | contac@technoconseil.fr


contac@technoconseil.f

Tutoriel pour la cration d'un Google Sites

Sommaire
Tutoriel pour la cration d'un Google Sites............................................................................................. 3
Cration du compte Gmail ...................................................................................................................... 5
Cration du site ....................................................................................................................................... 9
Paramtres du site ................................................................................................................................ 12
Mise en page du site (1) ........................................................................................................................ 14
Couleurs et Polices ................................................................................................................................ 15
Configurer le moteur de recherche ....................................................................................................... 17
Mise en page du site (2) ........................................................................................................................ 19
Modifier la page d'accueil ..................................................................................................................... 20
Modifier les paramtres de la page d'accueil ....................................................................................... 24
Crer les pages (annuaire, chiffres cls, historique ...) ......................................................................... 26
Modifier la barre latrale (1) ................................................................................................................. 29
Insrer une liste des sous-pages ........................................................................................................... 32
Crer les pages (Les Clients, Les hommes, Actualits) .......................................................................... 35
Modifier la barre latrale (2) ................................................................................................................. 37
Modifier le modle de page (Actualits) ............................................................................................... 40
Utiliser la fonction mini blog d'annonces .............................................................................................. 41
Ajouter une Google Maps la page Annuaire ...................................................................................... 44
Ajouter un graphique dynamique ......................................................................................................... 47
Ajouter une prsentation Google.......................................................................................................... 52
Ajouter un diaporama Picasa ................................................................................................................ 55
Ajouter une vido YouTube ................................................................................................................... 59
Modifier le modle de page (Les Hommes) .......................................................................................... 64
Utiliser la fonction Classeur ................................................................................................................... 66
Crer une FAQ avec Google Groups ...................................................................................................... 68
Crer un blog et afficher les messages sur le site ................................................................................. 75
Se connecter sur son site....................................................................................................................... 80
Gestion des images................................................................................................................................ 82

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites

Tutoriel pour la cration d'un Google Sites


Pr-requis pour raliser les exercices de ce tutoriel :
Possder un compte Google,
Avoir activ le service Google Sites,
tre connect (authentifi) sur votre Google Sites pour effectuer les exercices.

Lorsque que vous crez un compte Google*, plus connu sous le nom de compte Gmail, vous disposez
d'une palette d'outils tels que :
Gmail
Google Agenda
Google Document
Google Talk
Google Sites (...)
Dans ce tutoriel nous vous montrons comment raliser un site Google Sites** avec votre compte
Gmail. En suivant ce tutoriel pas pas vous pourrez raliser un site similaire celui de notre exemple
: http://sites.google.com/site/monsiteperso99/
Voici les services dont vous disposez (au 30/12/2009) lorsque vous crez un compte Gmail :

* Il est possible de crer un compte Google avec votre adresse personnelle (ex :
prenom.nom@mondomaine.com) mais dans ce cas vous ne disposerez pas de tous les services
proposs par Google.

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites


Voici les services dont vous disposez lorsque que vous crez un compte Google avec une adresse
email qui ne se termine pas par @gmail.com :

** Google Sites fait aussi parti des services d'entreprises Google Apps, voir les exemples
sur www.perseide.fr.

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites

Cration du compte Gmail


La 1re tape de ce tutoriel consiste lancer une recherche dans Google pour trouver le
service Gmail...

Une fois le rsultat de la recherche affich, vous pouvez slectionner le lien vers le service Gmail...

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites


Choisissez l'option Crer un compte...

Remplissez le formulaire d'inscription et continuez...

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites

tape 2 de l'inscription...

Une fois que vous avez reu le code d'inscription via SMS, saisissez le dans le formulaire d'inscription
et validez...

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites


Votre compte Gmail est cr ;o) Vous pouvez maintenant accder votre compte et aux diffrents
services Google.

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites

Cration du site
Lorsque vous ouvrez votre page d'accueil Gmail, diffrents menus sont affichs en haut de la page
droite, il s'agit des services Google auxquels vous avez accs. Les menus plus et encore plus vous
permettent d'afficher l'ensemble des services disponibles. Choisissez le menu Sites, si vous avez
plusieurs compte Gmail, Google vous demandera de choisir le compte que vous souhaitez utiliser,
choisissez le compte appropri et continuez.

Si vous vous connectez pour la 1re fois Google Sites, Google vous demandera surement de vous
identifier, saisissez vos informations et continuez...

TechnoConseil

www.technoconseil.fr

Tutoriel pour la cration d'un Google Sites


Vous tes maintenant connect au service Google Sites (l'URL affiche n'est
plus mail.google.com mais sites.google.com). Vous pouvez revenir sur le service Gmail quand vous le
souhaitez en cliquant sur le menu Gmail en haut droite de la page. Pour crer votre site cliquez sur
le bouton Crer un site...

Pour commencer et mieux comprendre Google Sites choisissez un Modle vierge, renseignez le Nom
de votre site (mon site perso... pour notre exemple), lorsque vous saisirez le nom de votre
site L'adresse de votre site sera cre automatiquement donc ne vous ne vous occupez pas de
cette information. Choisissez un modle de site Simple...

TechnoConseil

www.technoconseil.fr

10

Tutoriel pour la cration d'un Google Sites


Pour un site Public choisissez l'option Tout le monde peut consulter ce site, renseignez le captcha et
cliquez sur le bouton Crer un site... Votre site est maintenant cr.

TechnoConseil

www.technoconseil.fr

11

Tutoriel pour la cration d'un Google Sites

Paramtres du site
Maintenant que le site est cr, vous allez pouvoir le customiser votre guise, par exemple si vous ne
souhaitez pas afficher le titre de votre site (mon site perso avec gmail dans notre exemple)
mais plutt une image et/ou un logo voici les tapes suivre... Cliquez sur le menu Plus d'actions en
haut droite de la page Google Sites et slectionnez le sous-menu Grer le site...

Un fois sur la page de gestion (administration) de votre site, cliquez sur le menu Gnral...

Dsactiver l'option Afficher le nom du site en haut des pages. Vous devez garder un Nom de site
pour pouvoir l'identifier dans votre liste de sites (lorsque vous en aurez plusieurs cette information

TechnoConseil

www.technoconseil.fr

12

Tutoriel pour la cration d'un Google Sites


sera indispensable) et pour amliorer l'indexation dans les moteurs de recherche (Google, Yahoo et
MSN)

Enregistrez les modifications avant de sortir de la page et de Revenir au site.

TechnoConseil

www.technoconseil.fr

13

Tutoriel pour la cration d'un Google Sites

Mise en page du site (1)


Vous allez fixer la largeur de votre site 955 pixels pour qu'il soit toujours affich de la mme manire
quel que soit le type d'cran utilis. Vous viterez ainsi que votre site soit compltement "cass" sur
un cran haute rsolution. Cliquez sur les menus Mise en page du site et Modifier la mise en page
du sitede l'interface de gestion (administration) du site. Renseignez les valeurs suivantes Largeur du
site 955px, Hauteur de l'en-tte 160 pixels (l'image de notre exemple fait 159 pixels de hauteur),
laisser la valeur par dfaut de la Barre latrale 150 pixels, cliquez sur OK...

Enregistrer les modifications avant de Revenir au site.

TechnoConseil

www.technoconseil.fr

14

Tutoriel pour la cration d'un Google Sites

Couleurs et Polices
Une fois la largeur de votre site ajuste, vous allez importer l'image d'en-tte de votre site (dans notre
exemple l'image fait 955 pixels de largeur et 159 pixels de hauteur). Cliquez sur le menu Couleurs et
polices, dans le menu droulant choisissez l'option En-tte de site > image d'arrire plan des enttes de sites... Cliquez sur le bouton Choisissez un fichier pour ouvrir la boite de dialogue et
choisir l'image se trouvant sur votre ordinateur...

Une fois l'image choisie, slectionnez les options suivantes : Juxtaposition Aucun, Position
horizontale Au centre, Position verticale Haut...

TechnoConseil

www.technoconseil.fr

15

Tutoriel pour la cration d'un Google Sites


Enregistrez les modifications avant de Revenir au site.

Votre image est maintenant affiche en en-tte de votre site.

TechnoConseil

www.technoconseil.fr

16

Tutoriel pour la cration d'un Google Sites

Configurer le moteur de recherche


Une fonction de Google Sites permet de modifier les paramtres du moteur de recherche intgr, il est
aussi possible de le dsactiver. Lorsque vous tes sur la page d'accueil de votre site cliquez sur le
menu Plus d'actions > Grer le site, une fois que vous tes sur la page de gestion (administration)
du site cliquez sur le menu Mise en page du site et ensuite cliquez sur Configurer la recherche, la
boite de dialogue Configurer la recherche sur le site doit s'afficher.
L'onglet Gnral permet d'activer / dsactiver la recherche et de choisir si vous voulez tendre la
recherche au World Wide Web ou non. L'onglet Avanc permet d'ajouter un autre site de votre
domaine la recherche, dans notre exemple nous allons juste modifier le libell du bouton
"Rechercher". Donc dans l'onglet Avanc vous allez cliquer sur le bouton Ajouter un moteur dans la
fentre suivante vous ne modifiez pas l'option Type, vous nommez votre nouveau moteur de
recherche, par exemple Nom : GO, et vous ajouter le site sur lequel vous tes en train de travailler,
soit Sites inclure : slectionnez votre site dans le menu droulant (monsiteperso99 dans notre
exemple) et cliquez sur le bouton Ajouter un site, cliquez sur OK...

Il faut ensuite retourner dans l'onglet Gnral, dsactiver l'option Moteur de recherche : Ce site et
modifier la recherche par dfaut pour afficher votre nouveau moteur, soit : Recherche par dfaut
: GO. Cliquez sur OK et Modifier la mise en page du site avant de Revenir au site.

TechnoConseil

www.technoconseil.fr

17

Tutoriel pour la cration d'un Google Sites

Votre nouveau moteur de recherche avec le bouton GO est maintenant affich sur la page d'accueil.

TechnoConseil

www.technoconseil.fr

18

Tutoriel pour la cration d'un Google Sites

Mise en page du site (2)


Dans Google Sites vous pouvez modifier le positionnement de la barre latrale ou la dsactiver pour
qu'elle ne soit plus affiche sur votre site. Dans notre exemple vous allez mettre la barre latrale
droite de votre site. Pour cela vous devez, lorsque vous tes sur la page d'accueil de votre site, cliquer
sur le menu Plus d'actions > Grer le site, une fois que vous tes sur la page de gestion
(administration) du site cliquez sur le menu Mise en page du site et ensuite cliquez sur Modifier la
mise en page du site. Ensuite cochez l'option Barre latrale : sur la droite puis cliquez sur OK.

La barre latrale est maintenant affiche droite

TechnoConseil

www.technoconseil.fr

19

Tutoriel pour la cration d'un Google Sites

Modifier la page d'accueil


Pour modifier votre page d'accueil, cliquez sur le bouton Modifier la page...

Une fois en mode modification, slectionnez le menu Mise en page pour choisir un des modles
proposs par Google Sites, choisissez le modle Barre latrale gauche (ce modle permet d'avoir 4
zones distinctes ncessaires pour la suite de notre exemple).

Dans la zone suprieure saisissez le titre de votre page, ce titre est indpendant du nom de la page
(Accueil dans notre exemple), il ne sera pas affich dans la barre latrale. Le nom de la page peut
aussi tre modifi et/ou masqu, nous le ferons plus tard dans notre exemple. Dans le corps de votre

TechnoConseil

www.technoconseil.fr

20

Tutoriel pour la cration d'un Google Sites


page saisissez votre texte...

Pour insrer une image dans le texte, slectionnez le menu Insrer > Image...

TechnoConseil

www.technoconseil.fr

21

Tutoriel pour la cration d'un Google Sites


Choisissez un fichier importer, cliquez sur l'image importe et faites OK...

Pour intgrer l'image dans le texte, cliquez sur l'image et activez l'option Texte intgr...

Voici votre page aprs avoir effectu les oprations ci-dessus, n'oubliez pas d'enregistrer vos

TechnoConseil

www.technoconseil.fr

22

Tutoriel pour la cration d'un Google Sites


modifications.

TechnoConseil

www.technoconseil.fr

23

Tutoriel pour la cration d'un Google Sites

Modifier les paramtres de la page d'accueil


Google Sites propose par dfaut toute une srie d'options, pour les connaitre cliquez sur les
menus Plus d'actions > Paramtres de la page :
Afficher le titre de la page : le titre est le nom que vous donnez votre page lorsque que vous la
crez pour la 1re fois (vous pouvez le modifier ensuite), c'est l'information qui est affiche dans la
barre latrale et dans l'onglet de votre navigateur (il s'agit de la balise title). Vous pouvez donc dcider
d'afficher ou non cette information.
Afficher des liens vers les sous-pages : cette option permet d'afficher le Fil d'Ariane des souspages lies la page que vous tes en train de modifier, ce Fil d'Ariane s'affiche en pied de page.
Autoriser les pices jointes : en activant cette fonction vous pouvez uploader des fichiers (Word,
Excel, PDF, images ...) et les afficher en pied de page.
Autoriser les commentaires : en activant cette fonction vous pouvez rdiger des commentaires et
les afficher en pied de page (seules les personnes que vous aurez habilites modifier la page
pourront crire des commentaires).
URL de la page : vous pouvez modifier l'URL de votre page ( utiliser avec modration surtout si vous
avez dj partag cette page avec d'autres sites ou si cette page est indexe dans les moteurs de
recherche).
Modle de page en cours d'utilisation : voir exemple d'utilisation. Pour notre exemple vous
allez dsactiver les 4 premires fonctions et enregistrer les modifications...

TechnoConseil

www.technoconseil.fr

24

Tutoriel pour la cration d'un Google Sites


Ensuite vous allez renommer le titre de la page, cliquez sur Modifier la page...

Renommer Accueil en Le Groupe et enregistrer les modifications.

TechnoConseil

www.technoconseil.fr

25

Tutoriel pour la cration d'un Google Sites

Crer les pages (annuaire, chiffres cls, historique ...)


Dans cet exercice vous allez crer 4 pages. Ces 4 pages sont en fait 4 sous-pages de la page
d'accueil (renomme Le Groupe dans l'exercice prcdent). Cliquez sur le bouton Crer page...

Crer la 1re page : choisissez un modle de page classique, saisissez le nom Annuaire du
groupe et placez la page sous la page Le Groupe (page d'accueil). Ensuite, cliquez sur le
bouton Crer une page...

TechnoConseil

www.technoconseil.fr

26

Tutoriel pour la cration d'un Google Sites


Crer la 2me page : choisissez un modle de page classique, saisissez le nom Chiffres cls,
cliquez sur le lien Choisir un autre emplacement...

Slectionner la page Accueil (ou le Groupe). Ensuite, cliquez sur le bouton Slectionner puis sur le
bouton Crer une page...

TechnoConseil

www.technoconseil.fr

27

Tutoriel pour la cration d'un Google Sites


Pour la page Historique, rptez l'exercice prcdent...

Ensuite vous allez crer la page Gouvernance pour obtenir le rsultat suivant.

TechnoConseil

www.technoconseil.fr

28

Tutoriel pour la cration d'un Google Sites

Modifier la barre latrale (1)


Par dfaut, toutes les nouvelles pages (et sous-pages) que vous crez dans votre Google Sites (voir
exercice prcdent) sont affiches dans la barre latrale dans l'ordre alphabtique du titre de la page.
Dans cet exercice vous allez pouvoir modifier l'ordre des pages manuellement et supprimer les souspages car, terme, vous ne voulez afficher dans la barre latrale que les pages de 1er niveau. Les
pages de 1er niveau sont cres dans l'exercice Crer les pages (Les clients, Les hommes,
Actualit) et ajoutes la barre latrale dans l'exercice Modifier la barre latrale (2).
Pour raliser cet exemple vous allez cliquez dans le menu Modifier la barre latrale...

Dans la page Personnaliser la mise en page de votre site cliquez sur le bouton modifier du
menu Navigation...

TechnoConseil

www.technoconseil.fr

29

Tutoriel pour la cration d'un Google Sites


Dcochez l'option Organiser automatiquement ma navigation et cliquez sur OK...

Maintenant vous pouvez rorganiser votre barre latrale, supprimer les pages Annuaire du
groupe, Chiffres cls, Historique et Gouvernance.

TechnoConseil

www.technoconseil.fr

30

Tutoriel pour la cration d'un Google Sites


Enregistrer les modifications et revenez au site.

TechnoConseil

www.technoconseil.fr

31

Tutoriel pour la cration d'un Google Sites

Insrer une liste des sous-pages


Google Sites permet d'afficher un sous-menu de type barre latrale sur chacune de vos pages, cette
fonction permet de bien rpartir la navigation de votre site entre la barre latrales et vos sous-menu.
Pour raliser notre exemple, positionnez-vous sur la page d'accueil, mettez votre curseur dans la
zone vide gauche de la page et cliquez sur les menus Insrer > Liste des sous-pages...

Choisissez un titre afficher pour votre sous-menu (Le Groupe dans notre exemple), choisissez le
niveau suprieur de la srie de pages afficher (choisir une page...)...

TechnoConseil

www.technoconseil.fr

32

Tutoriel pour la cration d'un Google Sites


Slectionner la page Accueil (ou Le Groupe) et cliquer sur OK...

Choisissez la profondeur de l'arborescence afficher, dans notre exemple nous ne souhaitons


afficher qu'un seul niveau de sous-pages, Afficher les niveaux1. Laissez la largeur vide pour un
ajustement 100%, slectionnez l'apparence et enregistrez vos modifications.

Enregistrer les modifications faites sur votre page...

TechnoConseil

www.technoconseil.fr

33

Tutoriel pour la cration d'un Google Sites


Remarque : vous pouvez modifier votre sous-menu en cliquant sur la zone liste de pages "Le
Groupe" et le menu Proprits.

Votre sous-menu s'affiche maintenant sur votre page d'accueil.

TechnoConseil

www.technoconseil.fr

34

Tutoriel pour la cration d'un Google Sites

Crer les pages (Les Clients, Les hommes, Actualits)


Dans l'exercice Crer les pages (annuaire, chiffres cls, historique ...) vous avez vu comment crer
les sous-pages de la page d'Accueil, dans cette exercice vous allez crer 3 pages de 1er niveau (elles
sont au mme niveau que la page d'accueil). Cliquez sur le bouton Crer page...

Choisissez un modle de page classique, le nom de votre page est Les clients, placez la page au
premier niveau, cliquez sur le bouton Crer une page...

Choisissez un modle de page classique, le nom de votre page est Les hommes, placez la page au
premier niveau, cliquez sur le bouton Crer une page...

TechnoConseil

www.technoconseil.fr

35

Tutoriel pour la cration d'un Google Sites

Crez de la mme manire que les 2 pages prcdentes la page Actualits.

TechnoConseil

www.technoconseil.fr

36

Tutoriel pour la cration d'un Google Sites

Modifier la barre latrale (2)


Dans l'exercice Modifier la barre latrale (1) nous avons vu comment modifier le comportement par
dfaut de la barre latrale, dans cette exercice nous allons voir comment ajouter de nouvelles pages
la barre latrale. Dans l'exercice prcdent vous avez cr les pages "Les clients", "Les hommes" et
"Actualits", vous allez maintenant ajouter ces pages dans la barre latrale. Cliquez sur le
menu Modifier la barre latrale...

Cliquez sur le menu modifier de la zone Navigation de votre barre latrale...

TechnoConseil

www.technoconseil.fr

37

Tutoriel pour la cration d'un Google Sites


Cliquez sur le bouton Ajouter une page de la zone Navigation et slectionnez les pages ajouter.
Vous ne pouvez ajouter qu'une seule page la fois donc dans notre exemple vous devrez
recommencer l'opration 3 fois pour ajouter les pages : Les client, Les hommes, Actualit.

Une fois les pages ajoutes, cliquez sur le bouton OK...

TechnoConseil

www.technoconseil.fr

38

Tutoriel pour la cration d'un Google Sites


Enregistrez les modifications et revenez au site...

Vos pages sont maintenant affiches dans la barre latrale.

TechnoConseil

www.technoconseil.fr

39

Tutoriel pour la cration d'un Google Sites

Modifier le modle de page (Actualits)


Dans l'exercice Crer les pages (Les clients, Les hommes, Actualits) vous avez crez la page
Actualits. Lors de cette cration vous avez choisi un modle de page classique.
Dans cet exercice vous allez transformer votre page Actualits en mini-blog d'annonces (les fonctions
mini-blog sont vues en dtail dans l'exercice suivant). Positionnez vous sur la page Actualits et
cliquez sur les menus Modifier la page > Modifier le modle de page...

Slectionner un nouveau modle de page utiliser, cliquez sur Annonces et cliquez sur Modifier
le modle de page...

TechnoConseil

www.technoconseil.fr

40

Tutoriel pour la cration d'un Google Sites


Votre page Actualits affiche maintenant un bouton Nouveau message et un bouton

permettant

aux internautes de s'abonner au flux d'actualit de votre page.

Utiliser la fonction mini blog d'annonces


La fonction mini-blog
blog d'annonce vous permet de grer une partie de votre Google Sites comme un
blog, le dernier message publier est affich en haut de la page et les internautes peuvent vous suivre
avec leurs outils prfrs (ex : FeedReader,
FeedReader Google Reader, Firefox ...). Les utilisateurs, que vous y
aurez autoriss, pourront participer la rdaction de vos messages d'actualits et ajouter des
commentaires. Dans l'exercice
exercice prcdent vous avez vu comment modifier une page en mini-blog,
mini
dans cet exercice vous aller utiliser les fonctions mini-blog
mini log de Google Sites. Pour pouvoir ajouter un
message vous devez treconnect
connect sur votre site (voir Se connecter sur son site).
). Cliquez
sur nouveau message...

TechnoConseil

www.technoconseil.fr

41

Tutoriel pour la cration d'un Google Sites


Saisissez le titre et le corps de votre message (vous pouvez ajouter des images, des vidos, des
documents ...)

Pour tester le l'abonnement au flux RSS, cliquez sur le lien s'abonner pour recevoir les messages...

TechnoConseil

www.technoconseil.fr

42

Tutoriel pour la cration d'un Google Sites


Par dfaut Google vous propose d'utiliser iGoogle ou Google Reader mais vous pouvez utiliser d'autre
outil tel que FeedReader ou mme directement Firefox(dans ce cas copiez et coller le lien se
terminant par posts.xml dans votre outil). Dans notre exemple nous allons utiliser Google Reader,
cliquez sur le bouton Add to Google Reader, le nouvel abonnement s'affichera dans Google Reader,
vous pouvez ainsi valider le contenu tel qu'il sera vu par vos abonns.

TechnoConseil

www.technoconseil.fr

43

Tutoriel pour la cration d'un Google Sites

Ajouter une Google Maps la page Annuaire


Votre compte Gmail vous permet d'accder de multiples services, Google Maps est un de ces
services. Google Maps vous permet de crer vos propres cartes, dans notre exemple vous aller
insrer dans votre Google Sites une carte reprsentant la position gographique des filiales de votre
socit. Cliquez sur les menus plus et Maps (si le menu Maps n'est pas affich cliquez sur le
menu encore plus)...

Une fois que la page d'accueil de Google Maps est affiche (si Google vous demande d'activer ce
service, faites le) crez votre carte personnelle en utilisant les menus mes cartes > crer une
nouvelle carte (voir le tutoriel fourni par Google).

TechnoConseil

www.technoconseil.fr

44

Tutoriel pour la cration d'un Google Sites


Une fois que votre carte personnelle est prte, copiez l'URL de votre Google Maps. Retournez sur
Google Sites pour insrer la carte dans la page Annuaire du groupe. Cliquez sur le bouton Modifier la
page, placer votre curseur dans la zone centrale de votre page, cliquez sur les
menus Insrer puis Carte...

Collez l'URL dans la section collez un lien Google Maps ici.

TechnoConseil

www.technoconseil.fr

45

Tutoriel pour la cration d'un Google Sites


Modifiez les paramtres suivants :
Cochez l'option Inclure une bordure autour de la carte Google,
Dcochez l'option Inclure un titre,
Renseignez la Hauteur 500 pixels,
Laissez la largeur vide,
Enregistrez les modifications.

Votre carte est maintenant affiche dans votre site.

TechnoConseil

www.technoconseil.fr

46

Tutoriel pour la cration d'un Google Sites

Ajouter un graphique dynamique


Dans ce chapitre nous allons voir comment insrer un graphique dynamique dans la page Chiffres
cls de votre site. La source de donnes pour le graphique dynamique provient d'une feuille de
calcul Google Spreadsheet. Commencez en slectionnant le menu Documents.

Crez une nouvelle feuille de calcul, menus Create new > Spreadsheet...

TechnoConseil

www.technoconseil.fr

47

Tutoriel pour la cration d'un Google Sites


Saisissez les valeurs dans votre feuille de calcul, enregistrer les modifications (menus File > Save),
renommer votre feuille de calcul si ncessaire (menusFile > Rename, dans notre exemple la feuille de
calcul se nomme Motion Chart 2)...

Vous pouvez tester le graphique dynamique directement dans Google Documents afin d'valuer le
rsultat avant de l'insrer dans votre site.
Dans votre feuille de calcul cliquez sur les menus Insert > Gadget...

TechnoConseil

www.technoconseil.fr

48

Tutoriel pour la cration d'un Google Sites


Choisissez le gadget nomm Motion Chart et ajoutez le la feuille de calcul (Add
Add to spreadsheet)...
spreadsheet

Paramtrez le gadget et jouez le (bouton Play

). Si le rsultat vous convient, enregistrez


enreg
les

modifications. Copiez l'URL de votre feuille de calcul, voici les diffrentes tapes : share > get the
link to share > allow anyone with the link to view (copiez le lien) > save and close.
close Vous allez
pouvoir insrer le graphique dynamique dans votre site...

TechnoConseil

www.technoconseil.fr

49

Tutoriel pour la cration d'un Google Sites


Retournez dans Google Sites, positionnez vous sur la page Chiffres Cls et cliquez sur le
bouton Modifier la page. Cliquez sur les menus Insrer > Autres gadgets...

Recherchez le gadget motion chart et slectionnez le...

TechnoConseil

www.technoconseil.fr

50

Tutoriel pour la cration d'un Google Sites


Collez l'URL de votre feuille de calcul dans la zone URL de la source des donnes, modifiez
la largeur 100 pour cent, la hauteur 350 pixels, cochezl'option Ajouter un barre de
dfilement..., cochez l'option Ajouter une bordure..., dcochez Afficher le titre..., cliquez sur OK.

Le graphique dynamique est maintenant affich dans la page Chiffres cls.

TechnoConseil

www.technoconseil.fr

51

Tutoriel pour la cration d'un Google Sites

Ajouter une prsentation Google


Dans ce chapitre nous allons voir comment insrer une prsentation Google Documents dans votre
site. Ouvrez Google Documents en cliquant sur le menuDocuments. Crez une nouvelle prsentation
en cliquant sur les menus Create new > Presentation (vous pouvez aussi importer une prsentation
Powerpoint existante en cliquant sur le bouton Upload).

Voici quoi ressemble la prsentation de notre exemple (le titre de cette prsentation est Historique),
sauvegardez les modifications...

TechnoConseil

www.technoconseil.fr

52

Tutoriel pour la cration d'un Google Sites


Retournez dans Google Sites, positionnez-vous sur la page Historique de votre site et cliquez sur le
bouton Modifier la page. Cliquez sur les menus Insrer > Prsentation...

Slectionnez la prsentation Historique...

TechnoConseil

www.technoconseil.fr

53

Tutoriel pour la cration d'un Google Sites


Modifiez les paramtres suivants : cochez l'option Inclure une bordure..., dcochez l'option Inclure un
titre, Taille Moyenne (555 px), cliquez sur le boutonEnregistrer...

La prsentation Google Documents est maintenant affiche sur la page Historique de votre site.

TechnoConseil

www.technoconseil.fr

54

Tutoriel pour la cration d'un Google Sites

Ajouter un diaporama Picasa


Dans ce chapitre nous allons voir comment insrer un diaporama Picasa dans un Google Sites.
Slectionnez les menus plus > et encore plus...

Dans la page des services Google, slectionnez Picasa. Si Google vous demande d'activer le service,
faites-le !

TechnoConseil

www.technoconseil.fr

55

Tutoriel pour la cration d'un Google Sites


Importez vos images dans Picasa Web (vous pouvez tlcharger Picasa et l'installer sur votre
ordinateur afin de bnficier des fonctionnalits avances de gestion des images et de
synchronisation avec Picasa Web). Cliquez sur le bouton Transfrer, crer le titre de votre album
(Divers dans notre exemple), choisissez le mode de partage (Public ou Non rpertori)
et continuez...

Choisissez les fichiers transfrer et lancez le transfert...

TechnoConseil

www.technoconseil.fr

56

Tutoriel pour la cration d'un Google Sites


Copier l'URL de votre album (Lien vers cet album)...

Retournez dans Google Sites, positionnez-vous sur la page Les Clients et cliquez sur le
bouton Modifier la page. Cliquez sur les menus Insrer > Diaporama Picasa Album Web...

TechnoConseil

www.technoconseil.fr

57

Tutoriel pour la cration d'un Google Sites


Collez l'URL de votre album Web Picasa et paramtrez les options :
Format du diaporama 400px,
Cochez Lire automatiquement,
Cochez Inclure une bordure...,
Dcochez Inclure un titre,
Enregistrez les modifications.

Le diaporama est maintenant affich sur la page Les Clients de votre site.

TechnoConseil

www.technoconseil.fr

58

Tutoriel pour la cration d'un Google Sites

Ajouter une vido YouTube


Dans ce chapitre nous allons voir comment mettre en ligne votre vido YouTube sur votre Google
Sites. Slectionnez les menus plus > YouTube...

Si cela n'est pas fait, activez votre compte YouTube. Lorsque votre compte est actif,
slectionnez Ajouter une vido et suivez les instructions de YouTube...

TechnoConseil

www.technoconseil.fr

59

Tutoriel pour la cration d'un Google Sites


Une fois que votre vido est ajoute YouTube, vous pouvez la visualiser dans l'historique avant de
la mettre en ligne sur votre site.

Allez sur le lecteur personnalisable de YouTube, renseignez le nom du lecteur (lecteur 1 dans notre
exemple), choisissez le thme, la mise en page, lecontenu afficher, gnrez le code du lecteur
et copiez le code dans votre presse papier (Ctrl C)...

TechnoConseil

www.technoconseil.fr

60

Tutoriel pour la cration d'un Google Sites


Retournez dans Google Sites, slectionnez la page Actualits et crez un nouveau message...

Renseignez le titre de votre message, positionnez votre curseur dans le corps du message et cliquez
sur le menu HTML ...

TechnoConseil

www.technoconseil.fr

61

Tutoriel pour la cration d'un Google Sites


Collez le code de votre lecteur YouTube et cliquez sur le bouton Mettre jour...

Enregistrez les modifications...

TechnoConseil

www.technoconseil.fr

62

Tutoriel pour la cration d'un Google Sites


Votre vido YouTube s'affiche maintenant sur la page Actualits de votre site.

TechnoConseil

www.technoconseil.fr

63

Tutoriel pour la cration d'un Google Sites

Modifier le modle de page (Les Hommes)


Dans ce chapitre nous allons voir comment modifier le modle de la page Les hommes, l'objectif tant
d'utiliser la fonction classeur de Google Sites. Cette fonction permet de partager des documents
(Word, Excel, Powerpoint, PDF ...), des fichiers, des images, etc. comme vous le feriez si vous
partagiez les rpertoires de votre ordinateur. Allez sur la page Les hommes et cliquez sur les
menus Modifier la page > Modifier le modle de page...

Slectionnez le modle Classeur et cliquez sur le bouton Modifier le modle de page...

TechnoConseil

www.technoconseil.fr

64

Tutoriel pour la cration d'un Google Sites


Votre page est maintenant prte pour raliser l'exercice suivant de ce tutoriel.

TechnoConseil

www.technoconseil.fr

65

Tutoriel pour la cration d'un Google Sites

Utiliser la fonction Classeur


Dans ce chapitre nous allons voir comment utiliser la fonction classeur de Google Sites. Cette fonction
permet de partager des documents (Word, Excel, Powerpoint, PDF ...), des fichiers, des images, etc.
comme vous le feriez si vous partagiez les rpertoires de votre ordinateur. Dans l'exercice
prcdent vous avez modifi le modle de la page Les hommes pour pouvoir utiliser le
mode Classeur. Vous allez crer 3 nouveaux dossiers, la procdure est la suivante :
Cliquez sur le bouton Placez dans,
Nouveau dossier...,
Entrez un nom pour le dossier (dans notre exemple les noms sont Les ressources
humaines, Le savoir faire, Les mthodes de travail)
Enregistrez les dossiers crs.

Ajouter des fichiers. Vous avez la possibilit de charger les fichiers de votre ordinateur ou de lier des
fichiers externes, par exemple des Google Documents. Dans le 2me cas il suffit de coller l'URL du
fichier dans la zone le Web et renseigner le texte afficher.

TechnoConseil

www.technoconseil.fr

66

Tutoriel pour la cration d'un Google Sites


Une fois que vous avez ajout vos fichiers, vous pouvez les classer dans les dossiers crs
prcdemment en slectionnant le(s) fichier(s) classer et en cliquant sur le menu placer dans puis
en cliquant sur le nom du dossier de destination (Les ressources humaines dans notre exemple).
Rptez l'opration autant de fois qu'il sera ncessaire.

Les fichiers sont maintenant classs dans les dossiers.

TechnoConseil

www.technoconseil.fr

67

Tutoriel pour la cration d'un Google Sites

Crer une FAQ avec Google Groups


Google Groups est un service prvu pour grer des forums, aussi appel groupes de discussions ou
encore newsgroup. Un forum peut tre utilis pour grer une FAQ (Foire Aux Questions en
franais), voir un exemple de FAQ. Dans ce chapitre nous allons voir rapidement comment crer un
forum et comment afficher les derniers messages dudit forum dans votre site. Slectionnez les
menus plus > et encore plus...

Dans la liste des services Google choisissez Groups, activez votre compte si Google vous le
demande...

TechnoConseil

www.technoconseil.fr

68

Tutoriel pour la cration d'un Google Sites


Pour crer un groupe de discussion, indiquez le nom de votre groupe (Foire aux questions dans
notre exemple), crez l'adresse e-mail de votre groupe (foire-auxquestions@googlegroups.com dans notre exemple), dcrivez votre groupe, choisissez un niveau
d'accs (Public dans notre cas)...

Saisissez le Captcha et cliquez sur le bouton Crer mon groupe.

TechnoConseil

www.technoconseil.fr

69

Tutoriel pour la cration d'un Google Sites


Une fois que votre forum est cr vous pouvez lancer une nouvelle discussion, par
exemple Comment puis-je suivre ma commande ? Vous pouvez afficher les messages de votre FAQ
sur votre site, pour cela cliquez sur le bouton XML...

Google Groups vous permet de rcuprer plusieurs flux Atom ou RSS, cliquez sur les liens pour
visualiser le contenu du fichier XML et choisir le flux que vous afficherez sur votre site. Une fois que
vous avez fait votre choix copier l'URL du flux.

TechnoConseil

www.technoconseil.fr

70

Tutoriel pour la cration d'un Google Sites


Si vous avez un doute, vous pouvez tester le flux dans Google Reader...

Ajouter un abonnement, coller l'URL puis cliquez sur Ajouter, vous pouvez maintenant visualiser
votre flux dans Google Reader.

TechnoConseil

www.technoconseil.fr

71

Tutoriel pour la cration d'un Google Sites


Pour afficher les derniers messages du forum sur votre site, vous pouvez crer une nouvelle page
(FAQ dans notre exemple)...

Positionnez le curseur de votre souris au centre de la page FAQ puis insrez un gadget (Autres
gadgets)...

TechnoConseil

www.technoconseil.fr

72

Tutoriel pour la cration d'un Google Sites


Recherchez un lecteur de flux (feed reader en anglais, vous pouvez chercher le mot reader).
Slectionnez le gadget Generic Feed reader...

Collez l'URL de votre flux dans la zone Feed Entry, cochez les options Show Dates et Show
Summaries, mettez Number of Entries 5, largeur100%, hauteur 200 pixels, cochez ajouter une
barre de dfilement..., ajouter une bordure..., dcochez afficher le titre du gadget et cliquez sur OK.

TechnoConseil

www.technoconseil.fr

73

Tutoriel pour la cration d'un Google Sites


Les derniers messages de votre forum sont maintenant affichs sur la page FAQ de votre site.

TechnoConseil

www.technoconseil.fr

74

Tutoriel pour la cration d'un Google Sites

Crer un blog et afficher les messages sur le site


Blogger est le service de blog de Google. Un blog peut tre utilis pour publier tous types
d'information, les billets ou articles les plus rcents sont toujours affichs en premier. Dans ce chapitre
nous allons voir rapidement comment crer un blog et comment afficher les derniers messages dudit
blog dans votre site. Sur Google Sites slectionnez les menus plus > et encore plus pour arriver sur
la page des services Google, slectionnez Blogger...

Connectez-vous avec votre compte Google (votre adresse Gmail + votre mot de passe), ensuite
cliquez sur le bouton crer un blog...

TechnoConseil

www.technoconseil.fr

75

Tutoriel pour la cration d'un Google Sites


Saisissez vos informations, lisez et acceptez les conditions d'utilisation et continuez...

Renseignez le titre de votre blog, crez l'URL de votre blog et continuez...

TechnoConseil

www.technoconseil.fr

76

Tutoriel pour la cration d'un Google Sites


Choisissez un modle de blog et continuez...

Crez un nouveau message, affichez le blog et cliquez sur le lien Messages(Atom) et copiez
l'URL affiche dans votre navigateur, il s'agit de l'URL du fluxAtom (vous pouvez coller cette URL
dans un lecteur de flux pour valider le contenu avant de l'afficher sur votre site)...

TechnoConseil

www.technoconseil.fr

77

Tutoriel pour la cration d'un Google Sites


Retourner sur Google Sites, crez une nouvelle page que vous nommerez Notre Blog ou Mon Blog.
Insrez un gadget (Autres Gadget) dans la page Mon Blog...

Recherche un lecteur de flux (rechercher reader), puis slectionnez le gadget nomm Generic Feed
Reader...

TechnoConseil

www.technoconseil.fr

78

Tutoriel pour la cration d'un Google Sites


Collez l'URL de votre flux Atom dans la zone Feed Entry, cochez les options Show Dates et Show
Summaries, mettez Number of Entries 5, largeur100%, hauteur 200 pixels, cochez ajouter une
barre de dfilement..., ajouter une bordure..., dcochez afficher le titre du gadget et cliquez sur OK.

Les derniers articles de votre blog sont maintenant affichs sur la page Mon blog de votre site.

TechnoConseil

www.technoconseil.fr

79

Tutoriel pour la cration d'un Google Sites

Se connecter sur son site


Pour modifier un Google Sites il faut tre connect (authentifi, identifi) avec un identifiant et un mot
de passe. Le lien pour vous connecter est disponible en bas de chaque page de votre site, cliquez sur
le lien Connexion...

Une fois la page de connexion affiche, saisissez votre identifiant ou E-mail, dans notre exemple vous
devez saisir votre adresse Gmail (il n'est pas ncessaire de saisir @gmail.com) puis renseignez
votre mot de passe. Cliquez sur le bouton Connexion...

TechnoConseil

www.technoconseil.fr

80

Tutoriel pour la cration d'un Google Sites


Vous tes maintenant connect sur votre site, les diffrents services Google sont affichs en haut
gauche, les fonctions Google Sites droite et dans les diffrents pages de votre site.

TechnoConseil

www.technoconseil.fr

81

Tutoriel pour la cration d'un Google Sites

Gestion des images


Google Sites permet de modifier le positionnement et la taille par dfaut de vos images. Dans notre
exemple, aprs avoir insr une nouvelle image, nous souhaitons modifier la position et la taille de
l'image. Lorsque vous cliquez sur une image un menu est affich (au dessus ou en dessous de
l'image)...

Pour insrer l'image dans le texte, il faut activer le texte intgr (Texte intgr : activer)...

TechnoConseil

www.technoconseil.fr

82

Tutoriel pour la cration d'un Google Sites


Pour modifier l'alignement de l'image, cliquez sur aligner G, C ou D (gauche, centre ou droite), dans
notre exemple nous choisissons d'aligner l'image droite(D)...

Pour agrandir ou rduire l'image, il faut choisir la taille S, L, G ou Originale (small, large, trs large ou
taille originale), dans notre exemple nous choisissons la taille large (L).

TechnoConseil

www.technoconseil.fr

83

Crer un site web gratuitement avec Google Sites

Les mises jour de ce tutoriel sont disponibles sur Facebook !

Rejoignez-nous sur Facebook pour accder aux mises jour. Et pour


dialoguer avec les autres membres du groupe.
http://www.facebook.com/home.php?sk=group_229378610412541

Devenir Fan

http://www.facebook.com/pages/Cr%C3%A9er-un-site-web-gratuitementavec-Google-Sites/104982836258817

www.technoconseil.fr
contact@technoconseil.fr

TechnoConseil

www.technoconseil.fr

84

Centres d'intérêt liés