Création d'un site Internet

ETAPE 1 : création d'une nouvelle page web

Avant de créer une nouvelle page vous devez vous connecter à votre lecteur réseau en saisissant vos ifdentifiants personnels à l'ouverture de la session Windows.

Le logiciel permettant de créer des pages web s'appelle Macromedia Dreamweaver 8. Son icône est disponible sur le bureau de Windows :

Icône du logiciel de création des pages web

Ouvrez maintenant le logiciel Dreamweaver en cliquant sur son icône (ou en allant dans le menu démarrer + Tous les programmes + Macromedia + Macromedia Dreamweaver 8).

Pour créer une nouvelle page il faut :

1- ouvrir le volet Fichiers dans Dreamweaver (touche F8) :

2 - cliquer droit sur votre lecteur réseau P:
3 - cliquer sur Nouveau Fichier :

donner un nom au fichier en gardant l'extension .html :

IMPORTANT : la page d'accueil principale du site doit obligatoirement s'appeler index.html et doit être placée à la racine de votre lecteur réseau P:

Une fois la nouvelle page créée, double cliquez dessus dans le volet Fichiers afin de l'ouvrir, puis écrivez les paragraphes de texte sans oublier d'y écrire un titre en haut, centré et en gros.

Les paramètres du texte tapé dans la page web sont disponibles en bas de l'écran dans le cadre Propriétés. Ils s'agit de la configuration usuelle des caractères, exactement comme dans un traitement de texte classique (police, couleur, taille, alignement, etc.) :

Remarque : la seule police de caractères adaptée pour afficher du texte sur un écran (et donc dans un site Internet) est la police Verdana. Toutes les autres polices de caractères ont été conçues pour imprimer un document sur papier et sont pénibles à lire sur un écran informatique : utilisez donc exclusivement la police Verdana pour votre site afin de lui donner un aspect professionnel.

/!\ ATTENTION : les noms de fichiers doivent respecter un format bien strict /!\

Pourquoi ne peut-on pas donner un nom quelconque à un fichier ?

Lorsque vous réalisez un site Internet, vos fichiers vont êtres transférés à travers 3 supports bien différents :

vous travaillez sur un poste de travail fonctionnant sous Windows XP
vos pages web et vos fichiers seront hébergés sur un serveur fonctionnant sous Linux
et entre les deux les fichiers seront transférés à travers le réseau TPC/IP (Intranet ou Internet)

Or, ces 3 supports (Windows, Linux, et le réseau) codent les caractères spéciaux différemment (les caractères accentués et les caractères de ponctuation). Seules les lettres minuscules et les chiffres seront correctement interprétés dans les noms de fichiers sur les 3 supports. C'est la raison pour laquelle la liste des caractères utilisables pour les noms des fichiers est extrêmement limitée.

Lorsque vous enregistrez votre travail dans un fichier informatique, vous devez respecter les consignes suivantes en donnant un nom à votre fichier, si vous voulez éviter des problèmes lors de la ré-ouverture, de la copie, ou de la lecture du fichier.

Consignes à respecter lorsque vous donner un nom à un fichier

Lorsque vous donnez un nom à un fichier, vous devez absolument :

-> utiliser seulement des lettres minuscules non accentuées ou des chiffres
-> ne pas utiliser de lettres MAJUSCULES
-> ne pas utiliser de lettres accentuées
-> ne pas utiliser de caractères de ponctuation ou de caractères spéciaux
-> ne pas utiliser d'espace
-> si vous voulez séparer 2 mots dans le nom de votre fichier, afin de lui donner un nom explicite, vous pouvez utiliser le caractère "souligner" (touche 8 du clavier en minuscule), qui est le seul caractère spécial utilisable dans les noms de fichier

Exemple de nom de fichier non valide : Châssis du robot.html

Exemple de nom de fichier valide : chassis_du_robot.html

Ces consignes sont valables quelques soit le type de fichier que vous enregistrez (fichiers Python, fichiers Proteus, fichiers Flowcode, fichiers d'image PNG ou JPEG, fichiers Word, etc.) et particulièrement dans le cas des pages web de votre site (fichiers .html créés dans Dreamweaver).

ETAPE 2 : insertion d'une image sur la page

Pour insérer une image dans votre page web il faut :

1- copier le fichier de l'image sur votre lecteur réseau
2 - insérer l'image dans la page par un simple cliquer/déplacer dans Dreamweaver à partir du volet Fichiers :

IMPORTANT : avant d'insérer une image par un cliquer/déplacer, il faut préalablement l'avoir enregistrée dans votre espace réseau à un emplacement définitif, c'est-à-dire dans votre lecteur réseau P:. Si un jour vous déplacez ou vous renommez le fichier de l'image, elle ne s'affichera plus sur votre site Internet !

ETAPE 3 : création d'un lien vers une autre page

Pour créer un lien vers une autre page il faut :

créer la seconde page dans votre espace réseau comme indiqué à l'étape 1
écrire le texte du lien et le sélectionner
viser la page destinataire du lien dans le volet Fichiers en utilisant la cible dans Dreamweaver

Le fichier destinataire du lien peut être soit une autre page web (fichier .html), soit tout autre fichier à télécharger (fichier Python, fichier Proteus, fichier Automgen, fichier Flowcode, fichier Picaxe, etc.).

IMPORTANT : la création d'un lien en utilisant la cible ne fonctionne que si le fichier destinataire a été préalablement enregistré dans votre espace réseau à un emplacement définitif, c'est-à-dire dans votre lecteur réseau P:. Si un jour vous déplacez ou vous renommez le fichier destinataire, votre lien ne fonctionnera plus sur votre site Internet !

ETAPE 4 : finition des pages web

En cliquant sur « Propriétés de la page » dans Dreamweaver il est possible de :

modifier la couleur du fond de la page
modifier la couleur des liens
configurer la police par défaut

Enfin, chaque page web contient un titre. Le titre de la page est généralement un mot clé rapelant le contenu de la page (exemple : chat, chien, oiseau). Le titre d'une page web est afficher sur l'onglet du navigateur lorsqu'on teste lapage.

Par défaut Dreamweaver indique Document sans nom comme titre de la page. Pour le modifier il suffit de renseigner la ligne de saisie Titre en haut de la page dans Dreamweaver :

Désormais toutes vos pages web doivent contenir un titre précis permettant de les distinguer facilement en consultant simplement l'onglet dans le navigateur.

ETAPE 5 : modification du code HTML dans Dreamweaver

L'interface utilisateur de Dreamweaver est très limitée : elle permet de modifier seulement les paramètres principaux de la page. En modifiant directement le code source HTML de la page il est alors possibles d'accéder à des centaines de nouvelles possibilités pour améliorer les différents styles utilisés sur la page.

Pour réaliser ou modifier une page web, Dreamweaver dispose de 3 modes d'édition :

le mode Création
le mode Fractionner
le mode Code

Voyons comment modifier le code HTML d'une page web à travers l'exemple ci-dessous à refaire pas à pas dans Dreamweaver.

Nous partons d'une page web simple, contenat un titre, un paragraphe de texte et une image. Cette page a été créée en utilisant le mode Création de Dreamweaver qui permet de réaliser une page web comme un document dans un traitement de texte classique (sans utiliser ni voir le code HTML) :

En utilisant le mode Création de Dreamweaver créez rapidement une page similaire à l'exemple ci-dessus. Vous allez ensuite apprendre à modifier petit à petit le code source HTML de votre page exemple.

Pour voir une partie du code HTML de la page web il faut passer en mode Fractionner :

Et si on utilise le mode Code de Dreamweaver, on ne voit plus que le code source HTML de la page web, sans voir son rendu :

Nous allons surligner le mot "chats" dans le paragraphe de texte afin de le mettre en valeur. Pour cela, repassez en mode Fractionner, puis ajoutez une nouvelle balise  autour du mot "chats". En tapant simplement <sp on remarque que l'auto-complétion s'ouvre afin de proposer les différentes balises possibles. Choisisssez la balise  dans la liste des balises proposée par l'auto-complétion :

Refermez ensuite la balise  en tapant simplement </ après le mot "chats". Dramweaver comprend alors qu'il faut fermer la balise  et tape automatiquement  :

Nous allons maintenant ajouter un style à la balise . Pour cela, tapez un espace puis sty entre <span et >. L'auto-complétion propose alors tous les attributs de la balise . Choisissez l'attribut style dans la liste :

Pour configurer la couleur d'arrière plan du texte afin de le surligner, choisissez la propritété background-color dans l'auto-complétion :

Puis choisissez la couleur jaune dans la palette des couleurs proposées :

Le code hexadécimal du jaune (valeur #FFFF00) a été ajoutée automatiquement dans la propritété background-color :

Et en cliquant dans le rendu de la page web pour activer les modifications du code HTML on remarque que le mot "chats" a bien été surligné en jaune :

Problème : dans l'exemple ci-dessus on a surligné le mot "chats" mais aussi le point final de la phrase. Si on veut modifier l'étendu du surlignage, il suffit de faire entrer dans la balise  le texte à surligner. Par exemple en écrivant "aux chats" dans la balise  et en sortant le point de la balise, le tout en modifiant directement le code HTML de la page (ceci ne peut pas se faire dans le rendu de la page) :

Voyons maintenant comment améliorer le titre de la page en modifiant son style directement dans le code HTML de la page.

Pour l'instant le titre de la page est un texte brut contenant "Bienvenue sur mon site Internet" et possédant ni style ni couleur.

Commençons par l'écrire en plus gros avec une taille de 24 pixels. Pour cela on ajoute un attribut style à la balise  contenant le titre et en utilisant l'auto-complétion de Dreamweaver :

Toujours en utilisant l'auto-complétion, on ajoute une propriété font-size permettant de configurer la taille du texte :

Toujours en utilisant l'auto-complétion, on règle la taille du texte à 24px (24 pixels) :

Voilà, notre titre a désormais une taille de 24 pixels dans le rendu de la page (pensez à cliquer dans le rendu de la page pour activer les dernières modifications du code HTML) :

S'agissant d'un titre, il serait plus jolie en gras. Pour configurer le titre en gras il faut ajouter une nouvelle propriété font-weight à l'attribut style de la balise  contenant le titre.

Pour cela on tape un point-virgule suivi d'un espace après la proprété précédente (qui était ici font-size), puis on tape fon pour orienter l'auto-complétion, et on fini en choisissant font-weight dans la liste des propriétés proposée par l'auto-complétion :

Pour que le texte soit en gras on choisi la valeur bold pour la propriété font-weight dans la liste des valeurs proposées par l'auto-complétion :

Et voilà, notre titre est maintenant en gras et de taille 24px dans le rendu de la page :

Mais le titre manque de couleur : il est toujours noir pour l'instant.

Afin de le mettre en valeur nous allons configurer les couleurs du texte, de l'arrière plan et de la bordure du titre pour l'encadrer, toujours en ajoutant des nouvelles propriétés à l'attribut style, et en utilisant l'auto-complétion de Dreamweaver.

Commençons par configurer la couleur du texte. Pour cela, ajoutez une propriété color puis choisissez une couleur dans la palette proposée (ne pas oublier de commencer en tapant point-virgule espace après la propriété précédente afin d'ouvrir le menu de l'auto-complétion) :

Configurons maintenant la couleur de l'arrière plan du titre. Pour cela, ajoutez une nouvelle propriété background-color toujours en utilisant l'auto-complétion de Dreamweaver puis choisissez une couleur de fond dans la palette proposée (ne pas oublier de commencer en tapant point-virgule espace) :

Encadrons maintenant notre titre. Pour cela on ajoute une nouvelle propriété border (toujours dans l'attribut style de la balise  du titre).

Pour la valeur choisissons dashed dans la liste des valeurs proposées par l'auto-complétion (libre à vous de tester plus tard toutes les autres valeurs pour changer de style de bordure) :

On remarque dans le rendu de la page que la bordure du titre est en pointillés (ce qui correspond à la valeur dashed) et de la même couleur que le texte :

Pour modifier la couleur de la bordure afin qu'elle soit différentes de la couleur du texte, ajoutez une dernier propriété border-color, toujours en utilisant l'auto-complétion de Dreamweaver puis choisissez une couleur pour la bordure dans la palette proposée :

Enfin, une fois qu'on a fini de modifier le code source HTML de la page web, on repasse en mode Création pour admirer le résultat final dans le rendu de la page :

Nous venons de voir comment surligner du texte ou encodrer un titre sur une page web, cela fait partie des multiples possiblités accessibles seulement en modifiant le code source HTML de la page : l'interface utilisateur de Dreamweaver (volet "Propriétés" en bas de la page) ne permet pas de configurer tous ces styles.

Libre à vous maintenant de créer une ou plusieurs pages sur votre site, de les enrichir en contenu par du texte et des images, de personnaliser leur style en testant différentes possibilités proposées par l'auto-complétion de Dreamweaver dans le code source HTML, et de créer des liens pour que le visiteur de votre site puisse passer d'une page à l'autre.

Réalisé par Jean-Christophe MICHEL