Web-Interactive Mai Interactive 2.0. Manuel d utilisation

Transcription

1 Interactive 2.0 Manuel d utilisation 1

2 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu Ordonner les menus... 6 Destruction d un menu Chapitre 2 : Les pages... 7 Titre de votre page Résumé... 9 Contenu La barre d outils Créer un tableau Alignement et fusion de cellule Insérer une image Cas n 1 : image jamais utilisée Cas n 2 : image déjà utilisée Dimensions des images Insérer un lien Cas n 1 : lien vers une autre page internet Cas n 2 : lien vers une adresse

3 Chapitre 1 : L Arborescence Objectif : Créer et gérer l ensemble des menus et sous menus du site internet. Figure 1 : menu principal à gauche de l'écran pour accéder à la gestion de l'arborescence Créer un menu. La création d un menu est très simple mais doit être rigoureuse. Dans un premier temps, il vous faut choisir dans quelle partie de l arborescence vous souhaitez intégrer un nouveau en cliquant simplement sur cette dernière. Une fois ce choix effectué, choisissez directement dans le menu en haut de votre écran, le lien «ajouter un menu» ; vous obtenez alors la fenêtre suivante : 3

4 Le formulaire de saisie d un menu comporte 9 champs à compléter. Seuls les champs marqués un * sont obligatoires. 1. Indique la future position dans l arborescence de votre menu 2. Indiquer le titre de votre menu 3. si votre menu principal est constitué d images, les deux zones servent à insérer ces images. Les images doivent être en taille réelle et représente l image par défaut et l image survolée. 4. Indiquer ici une série de 2 à 4 mots clés décrivant ce menu 5. indiquer par une phrase simple et courte (moins de 250 caractères) une description de votre menu. 6. Si votre menu fait référence à une catégorie spécifique, vous avez la possibilité d associer une image illustrant cette catégorie. 7. Indiquer un chiffre compris entre 0 et 9 pour la version accessibilité de votre site si ce dernier en dispose. Les chiffres doivent être dans l ordre hiérarchique des menus, 0 représentant la page d accueil. 8. Indiquer ici vers quel type de contenu doit renvoyer ce menu. Par défaut, les menus renvoient toujours vers «page de gestion de contenu» ce qui vous permet de gérer les pages de votre site. En 4

5 fonction de vos options, les menus peuvent également renvoyer vers des formulaires de contact, des FAQ etc Enfin cliquer sur «Enregistrer» pour créer votre menu. 5

6 Ordonner les menus. A l aide des flèches haut/bas dans la colonne ordre, vous pouvez ordonner vos menus. Les déplacements se font à l intérieure de la rubrique en cours, ici dans l exemple ci-dessus, vous êtes dans la rubrique «menu supérieur». Si des sous-menus existent, ils se déplacent en même temps. Si vous souhaitez ordonner les sous menus de la rubrique «présentation», cliquez d abord sur le menu «présentation» puis utilisez les flèches haut/bas. Destruction d un menu. La destruction d un menu se fait en cliquant sur l icône poubelle à la droite du menu. Une confirmation vous est systématiquement demandée. après destruction. Si des sous-menus ou des pages sont dépendants de ce menu, le système vous demande de choisir un menu auquel rattacher ces informations 6

7 Chapitre 2 : Les pages Objectif : Créer et gérer les pages de votre site internet. Figure 2: menu principal à gauche pour gérer les pages du site Sur votre écran vous visualisez l ensemble de l arborescence du site internet ainsi que les pages déjà créées. Pour développer ou fermer une partie de l arborescence, un simple clic de soucis sur l intitulé du menu suffit. Selon vos droits d utilisateurs, vous disposez sur la droite de l écran pour chacune des entrées de l arborescence, de fonctionnalités d ajout, de modification et de suppression pour les pages et les rubriques. Figure 3 : listing de l'arborescence et des pages créées de votre site Pour ajouter une page dans une rubrique, cliquez simplement sur l icone. Vous obtenez alors le masque de saisie d une nouvelle page. 7

8 La saisie des informations se fait directement dans le formulaire. Titre de votre page. Le titre de la page sera le premier élément affiché. Ce titre doit concis, clair et précis. En plus de l affichage pour les internautes, le titre sert également pour le référencement du site internet, vous le retrouverez afficher dans la barre de titre de votre navigateur internet (en haut de votre écran) et également 8

9 dans les résultats des moteurs de recherche. Au sein même d un titre, il est préférable d éviter l emploi de caractères spéciaux de type? & * _ # etc Résumé. Tout comme le titre, le résumé est très important. Ce champ est limité à 250 caractères maximum. Sur le site internet ce champ apparaitra lors de la recherche par la internaute au sein du site et également dans les moteur de recherche de type google, yahoo etc.. Contenu. Le contenu est le cœur de la page. C est ici que vous insérerez l ensemble des informations pour l internaute (textes, images, liens etc ) Vous disposez d une barre d outils vous facilitant la mise en page. La barre d outils. Certaines zones de saisie disposent d une barre d outils afin de faciliter la mise en page des textes. Cette barre d outils vous donne accès aux fonctions suivantes : Supprimer un lien Copier Supprimer une mise en forme Gras Italique Liste à puces Insérer tableau Appliquer un style Couper Coller Coller comme texte Coller depuis word Faire un lien Liste numérotée Créer une ancre Insérer un symbole Le principe de fonctionnement des outils est le même que dans des logiciels de type Word ou OpenOffice, c'est-à-dire, vous sélectionnez avec la souris le 9

10 texte sur le lequel vous souhaitez agir, vous cliquez ensuite sur l outil approprié afin de valider votre choix de mise en page. Sur la droite de la barre d outils, vous disposez d une liste de styles permettant de présenter les titres, les sous-titres etc Utilisez directement ces styles pour vos présentations car ils sont directement reliés à la charte graphique du site internet. Ainsi si un changement de couleur, de taille d écriture doit avoir lieu ; il sera changé au niveau de la charte graphique et la modification sera automatiquement répercutée sur toutes les pages. Vous disposez également dans la barre d outils du bouton suivant. Ce bouton sert à afficher une fenêtre vous proposant des mises en page modèle pour votre site comme dans l écran ci-dessous : 10

11 Créer un tableau Pour créer un tableau on commence par cliquer sur le bouton d outils. de la barre Une fenêtre popup comme ci-dessous doit apparaitre. Lignes: permet de définir le nombre de ligne de votre tableau Colonnes: permet de définir le nombre de colonnes de votre tableau Bordure: Indique si les bordures du tableau sont visibles ou non (0=invisible, 1=visible) Alignement: Alignement du tableau par rapport à la page et au texte sur la même page, laisser de préférence «<par défaut >». 11

12 Largeur: indiquer la largeur du tableau en pixels ou en pourcentage. Si le tableau doit occuper la largeur totale d un emplacement indiquez une largeur de 100% Espacement: indiquer ici l espacement en pixel entre chaque cellule. Contour: indiquez ici la marge intérieure des cellules. Titre: Titre du tableau; ce dernier n apparaitra pas sur le site internet systématiquement Résumé: Résumé en quelques mots du contenu du tableau (non visible sur internet). Alignement et fusion de cellule. Pour aligner du texte ou des images dans une cellule de table, placer le curseur dans la cellule, puis cliquer sur le bouton droit de la souris ; choisissez ensuite «propriété de la cellule», la fenêtre ci-dessous apparaitra. L alignement horizontal et vertical se fait grâce aux 2 propriétés de cette boite de dialogue. 12

13 NOTE : en aucun cas il ne faut utiliser les boutons d alignement de la barre d outils, ces boutons s utilisent uniquement pour le texte en dehors des tableaux. Pour fusionner des cellules entre elles, on place le curseur dans la première cellule où débute la fusion, puis on clique sur le bouton droit de la souris ; choisissez ensuite «propriété de la cellule». Indiquez ensuite si vous faites une fusion de lignes ou de colonnes en plaçant un chiffre indiquant le nombre de cellule à fusionner. Vous pouvez également dans cette fenêtre indiquer une largeur de cellule en pixels ou en pourcentage en prenant soin de ne pas dépasser la largeur totale du tableau préalablement définie. Il n est pas utile de définir la hauteur des cellules, en effet sur internet la hauteur n a pas de sens en soi et ne sera pas prise en compte. 13

14 Insérer une image Pour insérer une image on commence par cliquer sur le bouton barre d outils. de la Une fenêtre popup comme ci-dessous doit apparaitre. Vous remarquez la présence de quatre onglets en haut de cette fenêtre. Seul le premier et le troisième onglet peuvent être nécessaires à l insertion d une image. Lors de l insertion d une image, deux possibilités s offrent à vous : 14

15 - l image n a jamais été utilisée sur le site internet - l image est déjà présente sur le site internet Cas n 1 : image jamais utilisée Ce cas est le plus fréquent notamment lors de la première rédaction des textes de votre site. Cliquez sur l onglet «Télécharger» Cliquez ensuite sur le bouton Parcourir Une nouvelle fenêtre «popup» s ouvre, vous invitant à choisir une image sur votre ordinateur. Les images peuvent être stockées sur votre disque dur, sur une clé USB, sur un lecteur réseau, sur un appareil photo numérique Veuillez toutefois à n utiliser que des images au format jpg, jpeg, gif ou png ; tout autre format ne sera pas reconnu sur internet. Note : Attention également au poids des images que vous 15

16 souhaitez envoyer sur le site internet. Même si le système optimise les images pour qu elles soient compatibles internet, le temps d envoie pour les «gros» fichier peut être long (plusieurs minutes) Cliquez maintenant sur le bouton «envoyer sur le serveur» Patientez jusqu à obtenir le message suivant : «Votre fichier a été envoyé avec succès». Une fois l image envoyée sur le serveur, vous revenez automatiquement sur le premier onglet où vous pré visualisez votre image ainsi que ses démentions. Sur cette page vous pouvez définir quelques options pour votre image : Texte de remplacement : ce texte est très important, vous devez indiquer ici une brève description de l image. Bordure : 1 ou 0, cela ajouter un contour noir à l image. 16

17 Espacement horizontal : il s agit d une marge blanche à droite et à gauche de l image pour empêcher le texte de coller à l image ; généralement il faut indiquer entre 2 et 5 pixels Cliquer sur le bouton «OK» pour finaliser l insertion de votre image. Espacement vertical : il s agit d une marge blanche en haut et en bas de l image pour empêcher le texte de coller à l image ; généralement il faut indiquer entre 2 et 5 pixels. Alignement : ceci représente la position de l image par rapport au texte. Si rien n est indiqué, le texte ira se positionner sous l image. Si vous choisissez «gauche», l image sera sur la gauche et le texte se disposera sur la droite de l image etc Cas n 2 : image déjà utilisée Si l image que vous envisagez d insérer se trouve déjà sur le site internet, l opération d insertion s en trouve raccourcie. Cliquez simplement sur le bouton «parcourir le serveur», une fenêtre comme celle-ci-dessous s ouvre : 17

18 Cliquez deux fois sur l image que vous souhaitez utiliser et poursuivez avec les mêmes manipulations que précédemment en ce qui concerne les bordures, l espacement et l alignement. Dimensions des images. Une fois les images insérées au sein de votre texte, vous pouvez à tout moment revenir sur la page de propriétés vue ci-avant et également modifier ses dimensions. Pour modifier les dimensions de l image, cliquer une fois dessus avec le bouton gauche de la souris. Une série de petits carrés se positionnent autour de l image. A l aide de la souris, déplacer les carrés afin de faire varier la taille de l image. Pour revenir à la fenêtre de propriété de l image, positionnez la souris sur l image, cliquez sur le bouton droit de la souris et choisissez dans le menu «propriété de l image» 18

19 Insérer un lien Pour insérer un lien sur du texte ou sur une image, vous devez commencer par sélectionner avec votre souris le texte ou l image sur lequel s insérera le lien. Ensuite cliquer simplement sur le bouton de la barre d outils. Une fenêtre popup comme ci-dessous doit apparaitre. Vous remarquez la présence de quatre onglets en haut de cette fenêtre. Seul le premier et le deuxième onglet peuvent être nécessaires à l insertion d un lien. Lors de l insertion d un lien, deux possibilités s offrent à vous : - le lien renvoie vers une autre page de votre site ou d un autre site 19

20 - le lien renvoie vers une adresse Cas n 1 : lien vers une autre page internet Ce cas est le plus fréquent notamment lors de la première rédaction des textes de votre site. Choisissez le type de lien : URL Laissez le protocole sur la mention « Indiquez ensuite dans URL, l adresse de la page de destination en commençant par www. Note : si vous souhaitez faire un lien vers un fichier à télécharger, cliquez simplement sur parcourir le serveur et choisissez le fichier à télécharger dans la liste qui apparait. 20

21 Onglet destination Cet onglet sert à indiquer le comportement du navigateur internet lorsque vous cliquerez sur le lien. Par défaut : le clic sur le lien remplace la fenêtre ouverte. Nouvelle fenêtre : une deuxième fenêtre de votre navigateur est ouverte (très utile pour les liens vers d autres sites) Fenêtre popup : cela ouvre le lien dans une «mini fenêtre» Note : Les autres types de destination sont à proscrire. 21

22 Cas n 2 : lien vers une adresse Pour faire un lien vers une adresse , choisissez type de lien « ». Compléter ensuite au moins le champ «Adresse ». Les deux autres champs sont simplement optionnels. Lorsque l internaute cliquera sur ce type de lien, son logiciel de messagerie s ouvrira automatiquement. 22