Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert.

Transcription

1 Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Internet - un site web Le web est une des applications principales du réseau Internet. Par analogie à un référent connu de tous les Français un site web s'apparente à une sorte de "super Minitel", un Minitel où textes, images (fixe ou animée) son et vidéos permettent de livrer une information de manière de plus en plus sophistiquée Matériel nécessaire : Pour réaliser le site : un ordinateur (Mac ou PC : le plus récent possible ), Un logiciel d'édition de page web, Pour le mettre en ligne : il faudra disposer en plus d'un modem, d'un logiciel dit de ftp (file transfert protocol) et d'un espace réservé auprès d'un hébergeur. La plupart des fournisseurs d'accès payant ou gratuits offrent un espace généralement autour de 20 Mo (ce qui est largement suffisant pour héberger un bon site). À noter que de nombreux hébergeurs gratuits existent pour ceux qui disposent d'un accès sans possibilité d'hébergement (cas de certains serveurs académiques) L'adresse de votre site sera dite de sous domaine c'est-à-dire du type : votre_hébergeur/nom_de_votre_site ex : Si vous souhaitez disposer de votre propre nom de domaine (votre identité sur le web il faudra déposer celui-ci par l'intermédiaire de votre hébergeur, c'est évidemment payant et soumis à une redevance annuelle (exemple l'occe a déposé le nom : occe.asso.fr Pour réaliser un site web : Le HTML Les fichiers qui composent un site web sont principalement conçus à partir d'un langage universel pour le Web le html (Hyper Text Markup Language) si dans les débuts il fallait acquérir de solides connaissances pour manier et utiliser ce langage, les logiciels d'édition graphiques permettent désormais de réaliser rapidement un site web sans aucune connaissance particulière en manipulant des icones et des commandes simples De nombreux logiciels existent citons les plus connus : Front Page (Microsoft), GoLive (Adobe), Dreamweaver (Macromédia),, Page Mill, Web expert etc Tous aboutiront au même résultat avec plus ou moins de fonctionnalités Remarque : un fichier réalisé avec un éditeur html peut être repris et travaillé avec un autre Autre remarque : Il est possible de transformer un fichier de PAO (mise en page papier Word ou Publisher) en fichier html (Hyper Text Markup Language, format universel pour le Web) au moyen d'un "traducteur". Malheureusement, le code html n'est pas toujours "pur" et sera parfois difficilement retravaillable. Très important : il convient d'établir immédiatement une différence entre le produit papier" (journal et le produit web. Il n'est pas souhaitable de transposer directement l'un vers l'autre, les approches, les conceptions seront différentes en raison de l'interactivité du support informatique par rapport au support papier. Les deux approches sont en fait complémentaires. 1

2 Pour débuter, Claris Home Page est simple, en français, utilisable par les élèves, avec des modèles, une collection d'images et une aide électronique complète. Ce logiciel existe pour PC et pour Mac. La version 2 est gratuite. La version 3 est disponible en version d'évaluation (complète, limitée à 30 jours). Vous pouvez la trouver sur le Cd-rom Wanadoo. L'achat de la licence complète est très peu onéreux pour les abonnés Wanadoo. Composition d'un site Un site web se compose en général de plusieurs pages (comme un journal) ces pages sont interactives entre elles par l'intermédiaire de l'hyper texte ou de boutons de commande Nous nous proposons de créer le site d'une AD OCCE Première page Utilisation du traitement de texte : Au lancement, le logiciel se présente presque comme un traitement de texte, la deuxième ligne d'icône présente la presque totalité des fonctions courante d'un tt : alignement à droite, à gauche, plus gros plus petit, gras, italique. Donc au début taper un texte dans une page qui sera supposé présenter l'ad et constituer un sommaire, l'enrichir : souligner, gras, corps des caractères etc À noter qu'il est également possible d'utiliser la fonction copier-coller 2

3 Sauvegarde lorsque vous allez sauvegarder votre page vous devrez nommer deux fois votre fichier : Nom de fichier : nom de la page. html ou nom de la page.htm (sans lettre accentuée, sans espace ; pas plus de 8+3 lettres si possible). La première page (sommaire, introduction) doit s'appeler index.htm pour que le navigateur l'ouvre en premier dans un répertoire. On a alors pas besoin de la nommer dans l'adresse URL. Nom de document : c'est ce qui apparaîtra dans le titre de la fenêtre du navigateur. Ne pas confondre avec le nom de fichier. ATTENTION : vous devez sauvegarder tous vos fichiers dans un même répertoire, dans lequel vous pourrez créer autant de sous répertoires que vous voulez mais il sera impératif de ne plus déplacer les fichiers (les changer de répertoire) sinon votre site ne fonctionnera pas correctement (nous expliquerons plus loin pourquoi) Deuxième page Traitement identique :nous créons une deuxième page : cette page présentera les actions de l'ad : Les liens Nous allons maintenant rendre nos pages inter actives à l'aide de liens. Premier type de lien : lien interne entre deux pages web ici entre la page index et la page actions Sur la page index sélectionner le texte action 3

4 Cliquez sur l'icône de l'éditeur de liens Une fenêtre s'ouvre : Utiliser le bouton parcourir fichiers pour sélectionner le fichier action.htm Double cliquez sur actions ou sélectionnez actions et cliquez sur ouvrir Puis refermer la fenêtre Le lien sera désormais actif le texte (les actions) apparaît souligné, vous pourrez le vérifier en passant en mode prévisualisation et en cliquant sur "les actions" la page correspondante va s'ouvrir 4

5 Pour passer en mode Prévisualisation cliquez sur l'icône du milieu L'icône représentant le petit crayon correspond au mode édition (pour travailler) L'icône de gauche vous permet de passer en mode html - Liens vers un fichier externe Dans la page index taper le texte : "lien vers le site fédéral de l'occe " Ouvrez l'éditeur de liens et tapez l'url (l'adresse du site web fédéral de l'occe) Quand le site sera en ligne cliquer sur ce lien déclenchera l'ouverture du site web fédéral. - Lien mailto : pour adresser un message depuis le site web en ouvrant directement le logiciel de courrier Sélectionnez le texte "nous écrire" de la page index et ouvrez l'éditeur de liens dans la fenêtre url taper la commande / mailto: uivi de votre adresse émail :occe.tarn.et.meuse@tagadatsointsoin.fr Lorsqu'un visiteur de votre site cliquera sur sur nous écrire son logiciel de courrier s'ouvrira avec un nouveau message ou la rubrique destinataire sera directement remplie avec votre adresse. - Lien d'ancrage dans une page 5

6 Lorsque qu'une page est très longue il est possible d'atteindre rapidement un élément se situant en bas de la page à partir d'un lien situé en haut Placez votre curseur à côté du texte ou de l'endroit que vous voulez et cliquez sur la petite icône en forme d'ancre La fenêtre suivante s'ouvre : par défaut le texte Ancrage apparaît, vous pouvez le remplacer par n'importe quel mot ou nombre de votre choix Puis en haut de la page sélectionner le texte qui enverra à l'endroit ou se situe l'ancrage, ouvrez l'éditeur de lien, dans la fenêtre url taper #suivi du mot ou nombre indiqué dans l'ancrage (pour éviter toute erreur faîtes un copié/collé. Les images 3 Ko par seconde! C'est la vitesse de chargement d'une petite configuration... Il faut donc des images légères. Les images qui sont insérées dans une page html devront impérativement être au format GIF et JPG Le format.gif convient généralement pour les images simples, contenant beaucoup de couleurs unies. Pas de dégradés ni de zones floues. Il vaut mieux se limiter à 16 couleurs. Les gif animés ne sont pas trop lourds. Le format.jpg est bien pour les autres images, les photos. Une photo publiée sur un site web n'est efficace qu'en jpg 72 dpi compressée à 60%. Placer un texte de remplacement (utile quand le navigateur ne trouve pas l'image ou quand l'utilisateur ne souhaite pas le chargement des images). Une même image, placée en plusieurs endroits sur la même page, n'est chargée qu'une fois, ce qui ne rallonge pas le temps de chargement. Si l'image est trop importante, on peut la "découper" pour qu'elle se charge plus facilement. Toutes les images devront être placées dans le même répertoire que l'ensemble des fichiers html, il est possible de les regrouper dans un sous répertoire images pourvu que celui-ci se trouve dans le répertoire du site. Pour insérer une image : 6

7 Cliquez sur l'icône Sélectionnez le fichier graphique : Logocce puis cliquez sur "ouvrir" le logo est alors inséré dans la page. 7

8 Les tableaux : Utilisation pour la mise en page ou comme tableau Pour la mise en page : plus qu'un long discours : Dans un tableau, vous pouvez insérer des images ou du texte Formatage du tableau : Pour accéder à toutes ces fonctions, il suffit de sélectionner le tableau et de double cliquer pour faire apparaître l'écran de commande : 8

9 Vous pouvez : Ajouter ou supprimer des lignes et colonnes Définir des largeur et hauteur précisément (vous pouvez aussi le faire "manuellement sur le tableau) Définir soit une couleur générale pour tout le tableau ou pour chaque cellule (en cliquant sur l'onglet cellules) Enfin la case bordure est importante, elle vous permet de rendre visible ou invisible le contour du tableau (dans l'exemple n 2 ci-dessus le contour apparaît en pointillé car le logiciel est en mode "édition" en mode "Prévisualisation" ou, dans un tableur, le contour est invisible. Image de tableau (ou image de fond de page) : on peut afficher en fond de page ou en fond de tableau une image (un papier peint) il suffit de cliquer sur le bouton "définir" de sélectionner un fichier image au format GIF ou JPEG qui se trouvera dans le répertoire du site. Attention un fichier volumineux peut considérablement ralentir le chargement de la page. Mise en ligne de votre site sur internet avec le logiciel FTP expert : Vous devrez disposer d'un espace web pour héberger votre site : plusieurs solutions existent soit au niveau de votre fournisseur d'accès soit auprès d'un hébergeur gratuit (exemple citeweb). 3 paramètres définis au moment de votre inscription ou envoyés par votre fournisseur d'accès vous sont nécessaires : hôte - id - mot de passe Au lancement du logiciel ftp expert la fenêtre suivante apparaît : Vous devez alors complèter les paramètres demandés (qui seront par la suite conservé) Ensuite, une fois connecté sur internet vous cliquez sur connecter. Le principe de fonctionnement est très simple : deux fenêtres apparaissent, celle de gauche figure votre disque dur (sur lequel se trouve pour l'instant le site web que vous avez créé, sur la fenêtre de droite se trouve le disque distant de vtre hébergeur. 9

10 Il suffit, par un simple "glissé/déposé" de faire passer les icônes de votre disque vers le disque distant. Rappel : la page d'accueil doit se nommer index.htm ou index.html. 10