Démarrage rapide

URL Tutoriel https://sites.google.com/view/abcgsite/
URL Google Sites : https://sites.google.com/

UTILE : Voir 28 sites conçus avec Google Site (en anglais) afin de visualiser les possibilités

Accéder à Google Sites https://sites.google.com/

Choisir un modèle: Sur la page d'accueil, Google Sites vous propose plus de 20 modèles de site qui propose une page d'accueil ainsi que quelques pages supplémentaires que vous utiliser, modifier ou supprimer selon vos besoins.

-vous pouvez en choisir un si cela vous convient (vous pourrez ultérieurement en changer ou modifier des pages) ou en changer l'usage: ex "Nouvelles de la famille se prête bien à une publication d'un album photo

-vous pouvez démarrer avec un site vierge dont vous choisirer le thème ( voir ci dessous l'onglet thème)

A vous de choisir

Accéder à Google Sites https://sites.google.com/

A vous de choisir

COMPRENDRE
- Comment débuter ?
  en haut, à droite se situe le MENU principal avec ses 3 rubriques : INSERER / PAGES / THEME
  - avant tout réfléchir à
    - - la présentation => thème ( présentation & aspect du site)
      - votre contenu
        nombre de pages et sous pages)
        insertions ( du contenu => quoi ? et comment sera-t-il disposé ?)
  - Comprendre le principe
    -Le contenu s'intègre par des "blocs" (texte, photo, docs de Drive...) encadrés en bleu dont
    - - la taille peut varier : utiliser les points O "bleu" pour modifier la taille
        l'emplacement du bloc sur la page par glisser/déposer en utilisant la "croix de saint André" ➕ qui s'affiche en effleurant un côté bleu du bloc
  - DEMARRER : Se rendre sur Google Site pour indiquer le TITRE et choir un MODELE
    - - D'abord Indiquer un titre
        Choisir un thème : présentation et aspect de votre site ( modifiable à tout moment) via l'onglet "THEMES"
        Cliquez sur le bouton Thème pour afficher les styles graphiques proposés par Google. Cliquez sur le style souhaité pour afficher automatiquement les modifications sur la page de conception. Vous pouvez également choisir la police de caractère.
        => CONSEIL / Commencez par un thème simple proposé par Google (testez les différents modèles proposés). Vous pourrez toujours en suite changer de modèle

- - CREER DES PAGES : mettre un titre via l'onglet "PAGES"
    Cliquez sur l’icône concernée pour créer une nouvelle page. Celle-ci s’ajoute dans un menu en haut de l’écran.
    Chaque page peut être réorganisée par un cliquer glisser.
    Un clic sur les 3 points à côté du nom de la page permet de définir une page comme page d’accueil du site, de la renommer, la supprimer ou de ne pas l’afficher dans la barre de navigation.
    - - Chaque page aura un contenu à insérer ( voir Menu à Droite)
        Chaque page peut avoir des "sous pages" qui s'afficheront uniquement en sous Menu

INSERER DU CONTENU via l'onglet "INSERER"

Si nécessaire utiliser les "blocs de contenu" proposés.
-Tous les blocs peuvent être déplacés.
-Si vous envisagez d'afficher texte et images d'illustration, il peut être utile de travailler par petits blocs de texte, à côté on présentera un bloc image illustratif

INSERTIONS USUELLES DE BASE
- - Des zones de texte
    Une nouvelle zone de texte matérialisée par un cadre bleu s’ajoute à la page.
    => Utiliser la barre d'outils texte s'affiche au dessus
    Une fois votre texte saisi, personnalisez les attributs (police, taille, alignement, lien externe…) et modifiez éventuellement la taille du pavé à l’aide des points bleus situés de chaque côté de la zone. La corbeille supprime la zone. L’icône palette de couleur permet d’afficher un fond de couleur différent au texte ou encore d’insérer une image de fond.
  - Des images
    L’icône image permet d’insérer une photo dans la page à partir de votre ordinateur, d’une adresse externe, de l’application Google Photos ou de Google Drive. L’onglet Rechercher permet de retrouver des images à l’aide du moteur de recherche Google Images. Google propose alors uniquement des photos dont les droits sont exploitables. Cliquez sur l’image souhaitée puis sur Sélectionner.
    => L’image insérée peut être rognée, redimensionnée à l’aide des points bleus ou supprimée. Vous pouvez aussi ajouter un lien sur l’image ainsi qu’un texte alternatif.
  - Des vidéos Youtube
    Cliquez sur l’icône Youtube pour rechercher une vidéo à intégrer à votre site.
  - Des documents de Drive

Vous pouvez insérer vos créations situées dans DRIVE
DOSSIER
Vous pouvez afficher dans votre site des documents provenant directement d’un dossier Google Drive. Ainsi, un document mis à jour dans Drive sera automatiquement disponible sur votre site. Cliquez sur l'icône Drive. Les dossiers de votre Drive disponible sont proposés. Sélectionnez celui contenant les documents à afficher et cliquez sur Insérer. Les documents présents dans ce dossier sont affichés sous forme de liste sur la page de votre site. Les internautes pourront les consulter en cliquant sur chaque lien. L’affichage peut aussi se faire en mode vignette depuis la roue crantée.

DOCUMENTS CREES avec GOOGLE DRIVE : TEXTE de DOCS / PRESENTATIONS / FEUILLE DE CALCUL de SHEETS /FORMULAIRE
Google site permet d’insérer directement le contenu d’un document Google Drive, d’une feuille de calcul, d’une présentation, d’un formulaire ou de graphiques.
Cliquez sur le type de document à insérer puis sélectionnez-le depuis votre espace personnel Google Drive.

CARTE ( de GOOGLE MAPS)

Cliquez sur Carte pour intégrer une carte Google Maps.
Affichez la carte souhaitée en fonction d’un lieu recherchée ou importer vos cartes personnalisées, créées à l’aide de l’outil My Maps. Vous pouvez ajouter un pictogramme sur un lieu à l’aide du bouton Déposer un repère. Cliquez sur Sélectionner pour importer la carte.
La carte affichée sur le site dispose des outils Google pour la recherche d’itinéraires jusqu’au repère indiqué. L’affichage satellite est aussi disponib

AGENDA

L’insertion d’un agenda provenant de Google Agenda s’avère extrêmement pratique. En effet, vous complétez celui-ci directement depuis votre agenda Google et les modifications s’affichent sur votre site. Cliquez sur Agenda.
Sélectionnez l’agenda souhaité puis Insérer. A noter qu’avec Google Agenda, vous pouvez créer un agenda secondaire, vous évitant ainsi d’afficher vos éléments personnels.

Par défaut votre agenda s’affiche en mode planning, vous pouvez modifier les paramètres d’affichage à l’aide de l’icône roue crantée. Il est possible de personnaliser le mode d’affichage (semaine, mois, planning) et les éléments à afficher.

INSERTIONS SPECIFIQUES
- Intégrer < > du code HTML, CSS, Javascript
  A réserver aux personnes initiées !
  - À droite, cliquez sur Insérer Intégrer.
    1. Vous pouvez également intégrer une page entière.
    2. À droite, cliquez sur Pages.
    3. Pointez sur Ajouter .
    4. Cliquez sur Intégration de la page entière .
  - Cliquez sur Intégrer le code.
  - Ajoutez votre code, puis cliquez sur Suivant.
    1. 1. Le code JavaScript doit être placé dans des balises <script>.
      2. Le code CSS doit être placé dans des balises <style>.
  - Cliquez sur Insérer.
  - Pour publier vos modifications, cliquez sur Publier en haut à droite.
- Groupe réductible
  Vous pouvez ajouter une zone de texte réductible pour économiser de l'espace sur votre site Google.

Sur la droite, cliquez sur Insérer Texte réductible.
Pour ajouter du texte pour le titre et le corps, cliquez sur les zones de texte.
Pour publier vos modifications, cliquez sur Publier en haut à droite.

- Table des matières

Vous pouvez ajouter une table des matières pour aider les visiteurs à se déplacer dans la structure de votre page. Lorsque vous modifiez la page, la table des matières est automatiquement mise à jour.En haut à droite, cliquez sur Insérer Table des matières.
Important : Assurez-vous que votre site comporte des titres, des en-têtes et des sous-titres. Ces éléments seront inclus dans la table des matières.
Publiez votre site pour activer la table des matières

- Carrousel d'Images
  Insérer un carrousel vous permet d'afficher des images défilantes sur votre site.

Sur la droite, cliquez sur Insérer Carrousel d'images.
Cliquez sur Ajouter une image .
Sélectionnez l'emplacement de vos images.
Choisissez au moins deux images.
- Pour supprimer ou ajouter un texte alternatif, passez la souris sur l'image.
- Pour réorganiser les images, effectuez un glisser-déposer.
Pour modifier le mode d'affichage des images dans le carrousel, cliquez sur Paramètres .
Cliquez sur Insérer.
Pour publier vos modifications, cliquez sur Publier en haut à droite.

Conseil : Pour afficher un aperçu du carrousel d'images, cliquez sur Aperçu en haut à droite.

- Bouton
  Vous pouvez ajouter un bouton sur votre site pour diriger les utilisateurs vers une autre URL ou une autre page.

Sur la droite, cliquez sur Insérer Bouton.
Saisissez un nom. Il apparaîtra sur le bouton.
Collez l'URL vers laquelle le bouton doit renvoyer ou choisissez une page sur votre site.
Cliquez sur Insertion.

- Séparateur
  Insérer un séparateur entre blocs
- Espace vide
  Vous pouvez utiliser des espaces vides pour réorganiser la mise en page de votre site et séparer différents éléments.

Dans le panneau de droite, cliquez sur Insérer Espace vide.
Vous pouvez déplacer l'espace vide par glisser-déposer, et ajuster sa taille.
Pour publier vos modifications, cliquez sur Publier en haut à droite.

- lien vers les réseaux sociaux
  - 1. À droite, cliquez sur Insérer Liens vers les réseaux sociaux .
    2. Vous pouvez ajouter une URL ou une adresse e-mail pour chaque lien vers un réseau social.
    3. Facultatif: vous pouvez également ajouter une image d'icône personnalisée pour chaque lien vers un réseau social.
      1. Conseil : Pour les réseaux sociaux populaires, Google Sites fournit automatiquement des images d'icônes.
    4. Cliquez sur Insérer.
    5. Cliquez sur une icône pour la modifier. Vous pouvez modifier la taille, la forme, le style, la couleur et l'alignement.

- Espace réservé
  Bloc, vide, qui permet aux éditeurs de sites de le remplacer par leur propre contenu

Sources essentielles et compléments sur