Université Mhammed Premier Ecle Supérieure de Technlgie Curs et TP Ggle Sites Que puvez-vus faire avec Ggle Sites? Avec Ggle Sites, vus puvez créer un site Web aussi facilement qu'un simple dcument. Cnstituez un répertire unique centralisant tutes les infrmatins imprtantes (vidés, agendas, présentatins, pièces jintes, dcuments texte, etc.), puis partagez-le rapidement et en tute sécurité avec : un petit grupe de persnnes (site d équipe), une rganisatin (site intranet) u le mnde entier (site publique). 1. Créer un site Pur cmmencer, créez un site Web avec Ggle Sites. Pur cela nus allns prcéder cmme suit : a. Accéder à Ggle Sites Pur accéder à Ggle Sites, u cnsulter la liste des sites qui vus appartiennent u que vus puvez mdifier : Dans vtre navigateur, accédez à la page sites.ggle.cm. Si vus êtes cnnecté à vtre cmpte Ggle Apps, cliquez sur en haut à drite de la fenêtre, puis sélectinnez Sites. Ensuite, Pur créer un site, cliquez sur 1
Université Mhammed Premier Ecle Supérieure de Technlgie b. Chisir un mdèle Pur partir d'un mdèle de site existant, cliquez sur Parcurir d'autres mdèles de la galerie. Pur créer un site vierge, sélectinnez Mdèle vierge. c. Dnner un nm au site 1. Dnnez un nm à vtre site. Par défaut, ce nm deviendra la partie spécifique de l'url de vtre site. 2. (Champs Facultatif) Mdifiez l'url indiquée sus Emplacement du site (ne craignez rien, cela ne changera pas le titre de vtre site). 3. (Champs Facultatif) Rédigez une descriptin du site sus Autres ptins. 2
Université Mhammed Premier Ecle Supérieure de Technlgie d. Sélectinner un thème Définissez l'apparence de vtre site. Chaque thème prpsé est asscié à un fnd, des culeurs et des plices prédéfinis. Vus purrez mdifier les plices, les culeurs et le fnd ultérieurement, et vus puvez à tut mment changer de thème. Lrsque vus avez terminé, cliquez sur CRÉER en haut de la page. e. Ajuter des pages Au départ, vtre site ne cmprte qu'une page d'accueil. Pur ajuter des pages : 1. Dans l'angle supérieur drit, cliquez sur 1. Dans la fenêtre qui s'affiche, saisissez le nm de la page. 2. Chisissez le type de page. 3
Université Mhammed Premier Ecle Supérieure de Technlgie Différents types de pages Page Web (page classique) Les pages Web snt les pages les plus simples : Vus puvez y Ajuter des cntenus, Intégrer des gadgets Et cnfigurer la mise en page à vtre cnvenance. La page Web ffre des ptins de mise en frme standard cmme la mise en gras, en italique, le sulignement, l'utilisatin de listes à puce, et bien plus encre. Vus puvez insérer des dcuments de vtre disque dur au bas de la page sus frme de pièces jintes. Les autres cllabrateurs du site peuvent laisser des cmmentaires sur vs pages. Ggle Sites enregistre régulièrement des versins de vs pages lrsque vus y apprtez des mdificatins. Ainsi, vus puvez rétablir des versins antérieures de vs pages pur les cmparer u pur annuler des mdificatins. Page de type Annnces Les pages d'annnces cntiennent les messages que vus publiez sur la page dans l'rdre chrnlgique, en cmmençant par les plus récents. Une page d'annnces est idéale pur cnsigner des ntes de réunins hebdmadaires, par exemple. Elle permet aussi d'accéder rapidement aux infrmatins les plus récentes sur les réunins. Classeur Les pages de classeur permettent de stcker et d'rganiser des fichiers issus de vtre disque dur, et facilitent le partage de fichiers avec les autres utilisateurs de vtre site. Tut utilisateur abnné à la page sera averti lrsque des fichiers snt ajutés, mdifiés u supprimés. Page de liste Les pages de liste vus permettent de créer et d'rganiser des listes d'infrmatins. Les éléments de la liste peuvent être facilement ajutés, mdifiés et supprimés. Les lecteurs de la liste peuvent la trier en fnctin de n'imprte quelle clnne. Cmme pur les pages de classeur, les abnnés reçivent une ntificatin lrsque des éléments snt ajutés, mdifiés u supprimés. Page d'accueil Une page de démarrage est une page qui peut être persnnalisée par chaque lecteur 4
Université Mhammed Premier Ecle Supérieure de Technlgie pur afficher un ensemble spécifique de gadgets. Les cllabrateurs du site peuvent malgré tut ajuter du cntenu visible par tus les lecteurs, mais cette sectin reste distincte de la sectin persnnalisable. 3. Chisissez l'emplacement de vtre page au sein du site, sit en l'imbriquant dans une page existante, sit en la laissant au premier niveau de l'arbrescence. 4. Cliquez sur CRÉER. Vus êtes maintenant prêt à persnnaliser la nuvelle page. 2. Mettre le site à jur et le persnnaliser Avec Ggle Sites, nul besin d'être un cncepteur Web pur créer un site d'aspect prfessinnel. Vici cmment vus puvez mettre à jur et persnnaliser vtre site. a. Mdifier des pages Vus puvez mettre à jur une page de la même manière qu'un dcument, mais avec beaucup plus d'ptins qu'un simple éditeur de texte. Sur la page que vus suhaitez mettre à jur, cliquez sur en haut à drite pur afficher les ptins de mdificatin. Ces ptins apparaissent autmatiquement lrsque vus créez une page. 1. Menu "Insertin" Ajuter des images Ajuter des liens Ajuter une table des matières Ajuter des gadgets Ajuter des éléments d'applicatins Ggle (agendas Ggle, cartes Ggle Maps et vidés YuTube, par exemple) 2. Menu "Frmat" et barre d'utils de mise en frme Mettre en frme le texte Mdifier l'alignement du texte Supprimer la mise en frme du texte 5
Université Mhammed Premier Ecle Supérieure de Technlgie 3. Menu "Tableau" Insérer, supprimer et mdifier des lignes et des clnnes de tableau 4. Menu "Mise en page" 5. HTML Indiquer le nmbre de clnnes de la page Ajuter des barres latérales Si vus vus y cnnaissez en langage HTML u CSS, vus puvez saisir du cde directement sur la page. b. Ajuter des images et des fnctinnalités au site L'nglet Insertin vus prpse un large éventail d'bjets, d'applicatins et de gadgets pur étffer vtre site. Il vus permet également d'intégrer des cartes Ggle Maps, des agendas Ggle et des fichiers. Vici quelques exemples de gadgets et d'applicatins utiles : 1. Fichiers mis à jur récemment : btenez la liste des fichiers récemment imprtés u mis à jur sur le site. 2. Ggle Agenda : faites en srte de réaliser vtre prjet dans les temps. Intégrez un agenda d'équipe cmprenant les dates de livraisn des principaux éléments du prjet. 3. Drive : intégrez par exemple des dcuments, des feuilles de calcul, des présentatins u des frmulaires Ggle. Lrsque le dcument surce est mdifié, les mises à jur apparaissent autmatiquement sur Ggle Sites (applicable aux dcuments, feuilles de calcul, frmulaires et présentatins intégrés). 4. Carte : vus rganisez une réunin à l'extérieur? Ne furnissez pas seulement l'itinéraire, intégrez une carte! 6
Université Mhammed Premier Ecle Supérieure de Technlgie 5. YuTube : intégrez une vidé YuTube dans vtre site. 6. Cliquez sur Autres gadgets pur décuvrir d'autres cmpléments cnçus par Ggle et des dévelppeurs tiers, u rechercher un gadget en particulier. c. Chisir les culeurs, les plices et les arrière-plans Vus puvez persnnaliser l'apparence de vtre site en ajutant une culeur u une image d'arrière-plan à la zne de cntenu, à l'en-tête u à la page entière. 1. En haut à drite de la page, cliquez sur, puis sélectinnez Gérer le site. Remarque : Ce butn n'est pas visible en mde Éditin. 2. Sur la page Gérer le site, dans la barre latérale, sélectinnez Thèmes, culeurs et plices. 3. Mdifiez les culeurs, les plices et les arrière-plans de vtre site. 4. Les mdificatins que vus apprtez s'affichent dans l'aperçu situé en bas de la page. 5. Cliquez sur ENREGISTRER. 7
Université Mhammed Premier Ecle Supérieure de Technlgie d. Mdifier la mise en page du site Structurez vs pages en mdifiant leur agencement. En haut à drite de la page d'accueil de vtre site, cliquez sur, puis sélectinnez Mdifier la mise en page du site. Pur ajuter des en-têtes, des pieds de page, des barres latérales u une barre de navigatin hrizntale, cliquez sur les ptins crrespndantes dans la barre d'utils. Cliquez de nuveau sur une ptin pur supprimer l'bjet asscié. Pur mdifier les bjets qui cmpsent vtre site, passez la suris dessus. Les znes mdifiables snt mises en surbrillance bleue. Cliquez sur un bjet en surbrillance pur le mdifier. En-tête : mdifiez la hauteur et l'alignement de l'en-tête, et ajutez un lg. Navigatin hrizntale : mdifiez le style de vtre barre de navigatin et sélectinnez les pages du site qui divent y figurer. Barre latérale : définissez le titre de vtre barre latérale et sn rganisatin, et sélectinnez les liens qui divent y figurer. Pied de page persnnalisé : insérez un texte en pied de page et définissez sa mise en frme. Lrsque vus avez fini de mdifier un bjet, cliquez sur OK. Lrsque vus avez apprté tutes les mdificatins vulues, cliquez sur Fermer Pur mdifier la largeur du site, cliquez sur Persnnaliser, puis saisissez une largeur. Appuyez sur Entrée pur appliquer et enregistrer la mdificatin. 8
Université Mhammed Premier Ecle Supérieure de Technlgie 3. Partager un site Ggle et le mdifier en mde cllabratif Maintenant que vus avez persnnalisé vtre site, vus puvez le partager avec d'autres utilisateurs. Déterminez si vus suhaitez rendre vtre site public u l'utiliser à titre privé au sein de vtre équipe u de vtre rganisatin Vus puvez également chisir d'autriser les autres utilisateurs à mdifier le site, u seulement à le cnsulter. Pur partager vtre site : 1. En haut à drite de la page d'accueil de vtre site, cliquez sur Partager. 2. Sus Qui a accès, cliquez sur Mdifier. 3. Sélectinnez la visibilité du site. Définissez un niveau d'accès pur l'ptin chisie. Tute persnne dispsant du niveau d'accès Mdificatin u Prpriétaire peut cllabrer à vtre site. En tant que prpriétaire du site, vus déterminez qui peut cnsulter et mdifier vtre site en ajutant d'autres utilisateurs cmme prpriétaires, cllabrateurs u lecteurs. 4. Cliquez sur Enregistrer. 5. (Facultatif) Si vus sélectinnez Persnnes spécifiques, vus puvez inviter les persnnes avec lesquelles vus suhaitez partager le site et définir leur niveau d'accès. Cliquez sur Envyer pur envyer une invitatin par e-mail. 9
Université Mhammed Premier Ecle Supérieure de Technlgie TP Créer vtre site web en se basant sur le mdèle suivant : https://sites.ggle.cm/a/ump.ac.ma/makasmi2016/ 10