1 Formations OCCE Conception et réalisation d`un site

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 : http://nom_de_
votre_hébergeur/nom_de_votre_site ex : http://perso.wanadoo.fr/occe69
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
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
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
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
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
:[email protected]
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
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
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
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
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
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