Page technique: Structure et disposition du répertoire

 

Dans ce document nous discuterons de l'importance de la structure et l'organisation des fichiers, , de l'attribution de noms aux fichiers, , des liens relatifs de la Navigation, et de tester votre page Web.

Structure et organisation des fichiers

L'organisation de vos fichiers of sur le serveur est extrêmement importante. Pour vous aider à dépanner votre ordinateur si vous avez des problèmes, le ministère de l'Apprentissage de la Saskatchewan vous demande de suivre ce modèle lorsque vous créez vos pages Web.

Votre page Web commence dans votre répertoire personnel dans un dossier (ou répertoire) appelé public_html. C'est à cet endroit que vous placerez tout le matériel relié à votre site Web (fichiers et dossiers). L'arbre suivant est la représentation graphique de la structure que vous devez respecter pour organiser vos fichiers dans votre répertoire.

 

public_html: Ce répertoire est pour tous les documents que vous allez mettre sur le Web.

index.html: Ceci est le nom du fichier de votre page d'entrée. Elle ne possède pas son propre répertoire.

class1: Ce répertoire sera utilisé pour toutes les pages Web pour la classe un. Bien noter qu'il comporte deux répertoires secondaires - images & documents. Pour chaque classe vous devrez avoir un répertoire séparé pour vos images (dossiers suivis de l'extension .gif, .jpg et un autre pour les pages html que vous appellerez documents. Si vous avez des informations relatives à cette classe, c'est également à cet endroit qu'elles seront rangées dans leur propre répertoire.

 
class 2 - class8: Ils suivent tous le même format que class1, ils possèdent leurs propres répertoires secondaires images et documents et sont des répertoires secondaires de public_html.

Attribution de noms aux fichiers

IDes noms de fichiers incorrects peuvent causer divers problèmes pour vos pages Web. Les deux problèmes les plus courants en matière de noms de fichiers sont les espaces et les caractères spéciaux. Voici des exemples de noms de fichiers corrects et incorrects. Ceci s'applique à tous les fichiers que vous voulez mettre en ligne - y compris les noms de répertoire!

Les noms de fichiers ne doivent contenir aucun espace.

Vous pouvez utiliser le soulignement pour remplir un espace.

Vous ne devez pas utiliser de MAJUSCULES dans vos noms de fichiers.

Mettez toujours vos noms de fichiers tout en minuscules. with

Les noms de fichiers ne devraient jamais dépasser 8 caractères de long.
Ce nom de ce fichier est également trop long.
Les noms de fichiers doivent décrire le contenu du fichier et avoir moins de 8 caractères.

Liens relatifs

Un autre aspect important de votre page Web est l'utilisation de Liens relatifs. Les liens relatifs vous permettent de créer des hyperliens et d'accéder à des fichiers relatifs à votre répertoire public_html. En d'autres termes, il n'est pas nécessaire d'inclure « www.sasked.gov.sk.ca/~username/........ » dans tous les liens. Voici comment ils fonctionnent:

Voyons encore une fois l'arbre de notre répertoire.

Exemple 1: Créer un lien menant de index.html à class1/ page1.html:

  • page1.html est situé 2 répertoires secondaires plus bas que index.html.
  • Donc le lien aurait l'apparence suivante:
  • <a href="./class1/documents/page1.html">Page 1</a>
  • Dans cet exemple nous devons changer 2 répertoires, class1 et documents.

Example 2: Afficher image1.gif dans page1.html:

  • image1.gif est situé dans le répertoire d'images qui est un répertoire secondaire de class1.
  • Puisque page1.html est situé dans un répertoire séparé (documents) nous devons d'abord monter d'un répertoire, puis changer le répertoire à images.
  • La balise pour cette image aurait l'apparence suivante:
  • <img src="../images/image1.gif">
  • L'instruction pour monter d'un répertoire est "../" Si vous voulez monter de 2 répertoire, devez utiliser la balise suivante "../../" suivie du nom du répertoire et du fichier que vous voulez utiliser.
Pour plus d'exemples de liens relatifs voir Navigation

Vous remarquerez que dans les exemples ci-dessus vous n'utilisez pas l'adresse URL complète c.-à-d.) www.sasked.gov.sk.ca/~username/page2.html.
Un lien relatif aurait l'apparence suivante <a href="/documents/page2.html">Page 2</a>
Tous vos liens devraient maintenant être relatifs à leur emplacement dans l'arbre de votre répertoire.

Navigation

Voici le modèle de navigation d'un site Rescol à la Source.

  • index.html devrait avoir des liens menant à toutes vos classes, et à tous les autres sites que vous voulez inclure.
  • chaque classe devrait avoir un lien menant à chacune de ses trois pages ainsi qu'un lien ramenant à index.html
  • Vous voudrez peut-être aussi ajouter les liens qui vous paraissent nécessaires.

Cliquer sur class 1 pour voir un arbre du répertoire du site Web.

 

Exemple 1)

index.html à class1.html

<a href="./class1/class1.html">Class 1</a>

Exemple 2)

index.html à Ministère de l'Éducation de la Saskatchewan

<a href=../../../../../"/ht/">Saskatchewan/index.html Education</a>

Example 3)

class1.html à page1.html

<a href="./documents/page1.html">Page 1</a>

Example 4)

Une image dans page1.html

<img src="./images/image1.gif">

Example 5)

page1.html à index.html

<a href="../../index.html">HOME</a>

Tester votre page Web

Après que vous avez terminé une page, ou plusieurs, il est important de télécharger les fichiers pour vérifier que tout le contenu de votre page Web fonctionne correctement. N'attendez pas d'avoir terminé tout votre site pour télécharger et tester. Il est facile d'avoir une fausse impression de sécurité, parce qu'on voit sa page Web sur l'écran. Mais une fois qu'on essaie d'y accéder par l'intermédiaire d'un navigateur en appelant l'URL (www.sasked.gov.sk.ca/~username/index.html), les choses n'apparaissent pas comme prévu. Voici quelques tests à faire pour assurer la qualité de vos documents Web.

  • Vérifier tous les hyperliens, ce sont souvent des erreurs toutes simples qui causent des problèmes d'accès et des liens rompus. Vérifier qu'ils renvoient bien où vous voulez.
  • Vérifier pour vous assurer que l'on voit tous les médias (graphiques, images et autres) que vous avez téléchargés se trouvent bien sur votre page.
  • N'oubliez pas de cliquer fréquemment le bouton Actualiser de votre navigateur pour recharger les données qui se trouvent sur votre serveur et vous assurer que vous travaillez bien sur le matériel le plus récent.
  • Finalement, toujours répéter les mêmes étapes en utilisant un autre navigateur. Ce qui fonctionne avec Internet Explorer ne donne pas toujours le même résultat avec Netscape.
    Vous pouvez télédécharger ces deux navigateurs en cliquant sur leur nom. Il est recommandé d'utiliser Internet Explorer 5 ou une version plus récente et Netscape 4.08 ou une version plus récente.