Gérer un site internet simple

Transcription

1 TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet?

2 Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google... 4 Étape 3 : éditer une page... 6 Insérer un lien hypertexte... 7 Créer une nouvelle page :... 9 Insérer une image Étape 4 : la mise en page du site L en-tête La barre latérale Le pied de page personnalisé La barre de navigation horizontale Étape 5 : régler les paramètres du Site Onglet «Général» Partage et autorisation Apparence du site : thèmes, couleur et police Architecture du site Étape 6 : les gadgets Google Rappels Mode lecteur Mode édition Mode mise en page... 25

3 Étape 1 : créer un compte Google (Gmail) Si vous en avez déjà un, passez à l étape 2 Pour créer un compte Google, écrivez la recherche «créer un compte Google» dans votre moteur de recherche et cliquez sur le premier lien : Il vous sera ensuite demandé de remplir un certain nombre d information (image ci-contre). Remplissez le formulaire et cliquez sur «Étape suivante». Ajoutez une photo si vous le souhaitez, sinon cliquez suis «Étape suivante» Félicitation, votre inscription est terminée

4 Etape 2 : créer un site internet Google Pour commencer, rendez-vous sur S il s agit de votre première connexion, votre mot de passe vous sera demandé, inscrivez le et passer à l étape suivante. Bienvenu sur Google Site! Cliquez sur «CRÉER» pour commencer.

5 Page de création : Choisissez «Modèle vierge» pour pouvoir suivre plus facilement ce tutoriel, sinon un modèle prédéfinit si vous pensez que ça ne posera pas de problème. Écrivez le titre de votre site tel que vous souhaitez qu il apparaisse en haut de la page et sur les onglets : ici «Site web de l UNMO» (vous pourrez le changer plus tard).l emplacement du site se remplira tout seul, n y prêtez pas attention En cliquant sur «sélectionner un thème», vous pourrez choisir parmi en ensemble de couleurs et graphismes prédéfinis pour votre site. La sélection du thème choisi n est pas définitive et ne nuira pas aux exercices de tutoriel En cliquant sur «Autres options», vous pourrez ajouter une description à votre site qui apparaitra dans les résultats de recherche sur votre moteur de recherche Saisissez le code affiché puis cliquez sur «CRÉER», en haut de la page (la création du site peut prendre un certain temps) Voici à quoi devrait ressembler votre site web vierge

6 Étape 3 : éditer une page Dans n importe quelle page, ici la page d accueil, vous pouvez l éditer pour ajouter du contenu en cliquant sur le crayon : Vous passez en mode édition. Vous pouvez ainsi modifier la page et ajouter du contenu à l envi, comme s il s agissait d un traitement de texte. Ici, en cliquant sur l onglet «mise en plage», en haut à gauche de la page, il est possible d organiser une page selon plusieurs dispositions.

7 On peut ainsi remplir toutes les cases qui peuvent s étendre à mesure que l on y écrit Insérer un lien hypertexte Dans la colonne de droite de l exemple précédant, nous allons ajouter un lien hypertexte. Un lien hypertexte permet de lier un mot ou un groupe de mot à une autre page du Site ou n importe quelle page internet si l on clique sur ce(s) mot(s). Pour ce faire, sélectionnez le mot ou le groupe de mot sur lequel vous souhaitez appliquer le lien, puis cliquez sur l icône «lien» : Quand le lecteur cliquera sur le lien, vous avez deux options : Soit le rediriger vers une page existante de votre site. L image ci-dessous montre l architecture du site web, vous pouvez choisir vers quelle page rediriger le lecteur en cliquant sur ladite page (nous verrons plus tard dans ce tutoriel comment créer de nouvelles pages).

8 Soit le rediriger vers un autre site internet. Il suffit de recopier l adresse du site souhaité. Le lecteur y sera redirigé en cliquant sur «cliquez ici» Notez bien que le lien ne marche qu en mode lecteur. Cliquez sur «enregistrer» pour passer en mode lecteur et vérifier si le lien marche bien.

9 Créer une nouvelle page : Pour créer une nouvelle page, il suffit de cliquer sur le bouton «Nouvelle page» : suivant apparaitra :, le menu En donnant un nom à la page, l URL de cette page se modifiera automatiquement. Vous pourrez changer cela en cliquant sur «changer l URL». Sélectionner page classique, ou cliquez sur «en savoir plus» pour connaitre les autres modèles de page disponibles. Si vous placez cette page à la racine, ce serait une page principale du site et il sera possible d y accéder depuis n importe quelle page. Vous pouvez cependant choisir de hiérarchiser les pages, en les rendant accessibles depuis un page spécifique seulement. Voici la nouvelle page appelée «Bulletin d information du CIR».

10 Insérer une image Par exemple, il est possible d insérer l image de couverture d un bulletin dans le mode édition ( ) après avoir sélectionné d emplacement voulu de votre image, cliquez sur «insertion», puis «image». Le menu suivant apparaît : En cliquant sur «importer des images», je choisi l image de couverture de mon bulletin qui est enregistrée sur mon ordinateur. Sélectionnez l image et cliquez sur «OK». Elle apparaît sur votre page. En sélectionnant l image, vous pouvez choisir son alignement, modifier la taille (P pour petite, M pour moyenne et G pour grande, 100% pour qu elle couvre l espace de la case jusqu aux bordures), son interaction avec le texte (autour ou à côté), et la supprimer. Il est aussi intéressant d ajouter un lien hypertexte à l image qui permettrait d afficher le document en question par exemple.

11 Étape 4 : la mise en page du site À ne pas confondre avec l édition d une page, la mise en page du site permet de modifier l apparence générale qu aura chaque page, mais aussi de modifier d architecture du site. Revenez en mode lecteur (en cliquant sur enregistrer), cliquez sur le bouton «paramètre», puis sur modifier la mise en page du site. Ce mode permet de faire des modifications sur 4 paramètres qui s appliqueront sur chaque page. Il s agit de : Par défaut, votre site n a qu un en-tête (zone horizontale supérieure où le titre apparait) et la barre latérale de navigation. En cliquant sur un de ces quatre onglets, vous pouvez les faire apparaitre ou disparaitre. Lorsqu ils sont apparents, cliquez sur la zone en question pour la modifier. L en-tête Par exemple ci-dessous, je clique sur l en-tête pour le modifier : Il est par exemple possible d ajouter le logo du site internet à partir d une image existante sur votre ordinateur. Vous pouvez jouer avec les options d alignement et garder celles que vous préférez.

12 Voici mon nouvel en-tête : Pour voir comment ajouter/supprimer de l en-tête le titre de votre site et la barre de recherche, retournez à l étape 5 : «Gérer les paramètres du site», onglet «général». La barre latérale Vous pouvez voir que sur la page d accueil du site de ce tutoriel, il y a beaucoup de pages. Par défaut, Google affiche toutes les pages existantes, jusqu à l échelon 2 de la hiérarchie (Page principale et sa sous-page). Ici, il n y a pas de hiérarchie pour l instant et toutes les pages sont affichées.

13 Cliquez n importe où sur la barre de navigation verticale La boîte de dialogue ci-dessous va s afficher : Vous pouvez : Modifier le titre de la barre de navigation Choisir les pages à afficher dans la barre de navigation (décochez «organiser automatiquement ma navigation»). Cliquez sur «ajouter une page» et sélectionner les pages parmi celles que vous avez créé. De préférence, il s agira des premières pages dans l ordre hiérarchique. o Notez bien que les pages que vous ne sélectionnez pas ne seront pas directement accessibles par le lecteur pour l instant. Mais comme nous l avons vu précédemment, vous pouvez créer des liens hypertextes pour mener le lecteur à ces pages. Vous pouvez aussi choisir d afficher au lecteur un lien vers le plan de votre site web (son architecture, la hiérarchie des pages etc ) Le pied de page personnalisé Par défaut, le pied de page n existe pas sur votre site. Pour le créer cliquez sur l onglet correspondant :

14 Une zone apparait en bas de la page comme ceci : Une zone de traitement de texte apparaît, vous pouvez y ajouter vos coordonnées, des liens vers les autres pages du site internet, les adresses internet de vos partenaires, etc La barre de navigation horizontale Comme pour le pied de page la barre de navigation horizontale n apparaît pas par défaut. Cliquez sur l onglet correspondant pour la faire apparaître : Cliquez ensuite sur la zone correspondante pour faire apparaitre la boîte de dialogue ci-contre : Comme pour la barre latérale, il s agit d une barre de navigation. Vous pouvez donc sélectionner les pages principales dont les titres s afficheront horizontalement entre l en-tête et votre contenu. Étant similaire à la navigation horizontale, il est conseillé de ne choisir d afficher soit l un soit l autre pour le pas surcharger la page. Pour cacher la barre latérale, cliquer sur «Barre latérale», vous pourrez la faire réapparaitre telle quelle en recliquant sur le même bouton.

15 Étape 5 : régler les paramètres du Site Sur la page de votre site, cliquez sur le bouton «paramètres», symbolisé par : Puis, dans le menu déroulant, cliquez sur : «Gérer le site» Onglet «Général» Vous rentrez maintenant dans l administration du site, dans l onglet «Général».

16 Ici vous pouvez changer le nom du site internet (mais pas son adresse URL). Le nouveau titre changera sur l en-tête du site internet ainsi que sur l onglet de votre navigateur, comme ci-dessous. Vous pouvez en outre choisir de ne pas afficher le titre du site web sur l en-tête en décochant la case «Afficher le nom du site en haut des pages». Vous pouvez supprimer la barre de recherche de votre

17 Partage et autorisation Dans l onglet «partage et autorisation», vous pouvez décider qui peut accéder à votre site et qui peut le modifier. Par défaut le site est public, c est-à-dire que quiconque trouve ce site grâce à son moteur de recherche peut y accéder. Pendant que le site est en construction, il est peut être préférable de ne pas le rendre public, cliquez alors sur «modifier» puis cochez la case «personnes spécifiques».

18 Après avoir enregistré, vous pouvez inviter des collaborateurs en leur donnant des droits d édition sur votre site internet (Ils doivent avoir un compte Google). Assurez-vous de sélectionner «modification autorisée» (d autres choix sont disponibles en cliquant). Ajoutez un message à votre collaborateur en cochant la case «Prévenir les contacts par ». Cette personne devra cliquer sur le lien ainsi envoyé sur sa messagerie, puis sur «se connecter» apparaissant tout en bas de la page. Elle pourra ainsi avoir les mêmes droits et options que le propriétaire du site en terme d édition, mais n aura pas accès aux paramètres du site. Apparence du site : thèmes, couleur et police

19

20 Architecture du site

21

22 Étape 6 : les gadgets Google Parmi les gadgets proposés par Google, le calendrier peut être un outil important, il permet d alerter les visiteurs sur les évènements importants à venir. Cliquez avec le curseur dans la zone ou vous voulez faire apparaître le gadget. Puis, dans le menu «Insertion», cliquez sur «autres gadgets» (comme vous le voyez, vous pouvez aussi insérer des vidéos YouTube, une carte interactive, une image etc ). Sélectionner ensuite le premier Gadget : «Google Agenda» Notez que le calendrier n apparait qu en mode lecteur. Enregistrez votre progression pour passer en mode lecteur.

23 Vous pouvez ajouter des évènements au calendrier en cliquant sur «ajouter» en bas de celui-ci. Vous serez redirigé vers la page suivante, vous permettant de donner les détails de l évènement.

24 Votre nouvel évènement apparaitra comme suit sur votre Google Gadget En cliquant sur l évènement, le lecteur pourra lire les détails que vous avez spécifiés.

25 Rappels Mode lecteur C est le mode par défaut, il permet de consulter le site web comme pourrait le faire n importe quel lecteur disposant des droits d accès Mode édition On y accède depuis le mode lecteur en cliquant sur l icône «modifier la page» et permet d afficher la barre ci-dessous. Ce mode est principalement pour ajouter du contenu à vos pages. Quittez ce mode en cliquant sur, vous reviendrez au mode lecteur. Mode mise en page Vous pouvez revenir au mode lecteur en cliquant sur.