Atelier Dreamweaver.

Lien vers l'ancien atelier Dreamweaver.

Cet atelier va vous apprendre les techniques de base pour réaliser un site avec Dreamweaver.

1
Préparation de l'arborescence locale
et paramétrage de l'accès au serveur Internet.

La démarche suivante est celle que vous appliquerez à chaque fois que vous créerez un nouveau site Web :

  • Vous créez tout d'abord, dans votre répertoire de travail, un répertoire qui contiendra l'ensemble des sites que vous réaliserez pendant vos deux années de BTS. Ce répertoire s'appellera, par exemple, Sites Web.

  • Vous créez à l'intérieur de ce répertoire, un répertoire qui va contenir le site que vous allez créer aujourd'hui, et que vous nommez TP Dreamweaver.

Vous pouvez fermer cette fenêtre
 

Remarque sur... l'hébergement local et l'hébergement distant.

Aujourd'hui, notre site est hébergé sur le serveur Internet de la section, (5LM38038 en salle B204). Ce serveur n'est pas accessible à partir de l'extérieur du lycée, les sites que vous créerez ne sont donc consultables qu'à partir des ordinateurs du lycée.

Si vous souhaitez que n'importe quel internaute en France ou dans le monde puisse accéder à votre site Web, il faut l'héberger à l'extérieur :

  • chez un hébergeur gratuit : Free, iFrance, etc ;
  • chez un hébergeur payant : Lost Oasis, Online.net, Amen, etc ;
  • chez vous, si vous avez une connexion permanente à Internet (ADSL + serveur internet allumé en permanence). Une adresse IP fixe n'est pas indispensable, il y a des solutions.

Si vous êtes chez un hébergeur, vous devrez configurer DreamWeaver de la même façon que pour cet atelier.


2
Découpage de la page d'accueil en cadres (en anglais : frames)
et sauvegarde du jeu de cadres.

Découpage en cadres.

Dans le gestionnaire de site, vous allez créer les pages HTML (également appelées pages Web) qui constituent votre site. Pour cela :

  • Dans la fenêtre Site - TP Dreamweaver, faites un clic droit sur le répertoire Z:\Sites Web\TP Dreamweaver, puis choisissez la commande Nouveau fichier (comme cela est montré sur la capture d'écran précédente) ;

  • Renommez le fichier en index.html ;

Information sur... La page index.html.

Lorsqu'on tape l'adresse d'un site Web dans un navigateur, sans préciser la page que l'on veut afficher, alors c'est la page index.html (ou index.htm, ou index.php) qui est chargée par défaut.

C'est pourquoi le point de départ de tous les sites Web est un fichier nommé index.html.


Information sur... Cadres vs. Tableaux.

On peut effectuer un découpage de page similaire sans cadre, en utilisant un tableau HTML et en mettant chaque partie dans une cellule du tableau. Le résultat est très proche mais :

  • Avantage des tableaux : plus simple à mettre en oeuvre, on n'a pas à jongler avec plusieurs fichier HTML pour une même page Web.
  • Avantage des cadres :
    • Quand l'utilisateur clique sur un lien hypertexte, on ne télécharge que le cadre "contenu", on ne recharge ni les logos, ni le menu.
    • Les logos, le menu sont centralisés dans une seule page Web, alors que pour les tableaux on doit dupliquer le même menu dans chacune des pages de notre site (on améliorera ça grâce au PHP).
    • Facilités d'impression : on peut imprimer uniquement le cadre "contenu" sans imprimer le menu ni le logo.
    • Scrolling indépendant de chaque cadre : on peut faire défiler le cadre "Contenu" en gardant toujours le menu présent à l'écran.
Malgré les nombreux avantage des cadres, la plupart des sites Web préfère une mise en page bésée sur les tableaux. C'est le cas du site des cours.

Sauvegarde du jeu de cadres.

Avant de tester ceci dans un navigateur, vous devez sauvegarder les fichiers correspondants. C'est assez délicat, car le découpage que l'on a fait ci-dessus représente 5 fichiers différents à enregistrer :

  • un fichier pour le jeu de cadre, qui décrit le découpage de la page en quatre cadres, la taille des bordures entre les cadres, la présence de barres de défilement, le nom du fichier HTML à charger dans chaque cadre, etc.
  • un fichier pour le contenu HTML de chacun des cadres, soit quatre fichiers.

Commencez par renommer chaque cadre :

  • choisissez la commande Cadres du menu Fenêtre ;

  • dans cette fenêtre des cadres (représentée ci-contre), sélectionnez chacun des cadres. Renommez-les respectivement en logo, pub, menu, contenu grâce à la fenêtre de propriétés de la sélection présentée ci-dessous (si cette fenêtre est absente, faites-la apparaître avec la commande Propriétés de la sélection du menu Modifier).


fenêtre de propriétés de la sélection


fenêtre des cadres

Information sur... La fenêtre de propriétés de la sélection.

Cette fenêtre que l'on voit ci-dessus en capture d'écran est extrêmement importante et très pratique. Elle permet de modifier les principaux paramètres de ce qui est sélectionné : texte, tableaux, cadres, jeux de cadres, bref tout et le reste ! Si vous voulez modifier quoi que ce soit, ayez le réflexe de voir dans cette fenêtre si le paramètre correspondant s'y trouve.

Pour vous entraîner, modifiez les propriétés du jeu de cadre en ajoutant une bordure entre les cadres.


La page est pour l'instant très sommaire, mais l'objectif au final sera d'améliorer la présentation, par exemple pour obtenir quelque chose comme ci-contre :

3
Création d'un premier lien hypertexte
depuis le menu vers une page "contact".
  • Dans le sélecteur de fichier qui apparaît, choisissez la page contact.html, puis validez.

  • Dans la fenêtre de propriété de la sélection, renseigner Cible : contenu. Cela indique que la page contact.html doit s'afficher dans le cadre de droite (contenu) et non pas le cadre de gauche (menu).

  • Essayez ceci.

Précisions sur... différence entre les extensions HTM et HTML.

Auparavant (sous DOS, Windows 3), les extensions des fichiers étaient limitées à 3 caractères. C'est pourquoi les pages Web portaient l'extension .HTM. Depuis Windows 95 (et également sous Linux), on n'est plus limité pour la taille des extensions. C'est pourquoi on utilise de plus en plus l'extension .HTML.

C'est le cas également pour les images au format JPEG, dont l'extension passe progressivement de .JPG à .JPEG.

Réutilisez ce que vous venez d'apprendre pour faire d'autres liens hypertextes :

4
Uploader le site sur le serveur Internet
et consulter le site en distant à partir du navigateur.

Jusque à présent, vous avez testé le site "en local", c'est à dire que le navigateur lit les pages qui sont stockées sur votre disque dur (ou plus précisément sur votre répertoire de travail), sans interroger un serveur Internet. Ce n'est donc pas exactement comme lorsqu'on navigue sur des sites Web.

Vous allez maintenant uploader votre site depuis votre répertoire de travail vers un serveur Internet, et tester votre site à distance : votre navigateur va interroger le serveur Internet pour recevoir les pages Web.

Précisions sur... les serveurs Internet.

Il existe des dizaines de logiciels faisant office de serveur Internet. Les plus répandus sont Apache (sour Linux et Windows) et IIS (Internet Information Services, de Microsoft, sous Windows uniquement). Si votre site est hébergé chez un hébergeur gratuit, il est fort probable que le serveur Internet soit Apache couplé au système d'exploitation Linux.

Ici au lycée :

  • Le serveur Internet utilisé est Apache, avec extension PHP, et le serveur de bases de données MySQL ;
  • L'ordinateur qui héberge ce serveur Internet est le 5LM38038, en salle B204, sous Windows NT Server ;
  • Son adresse IP est 172.31.0.9.

Pour réaliser ceci :

Précisions sur... uploader juste une partie du site local.

Les fois suivantes, vous ne transférerez pas tous les fichiers vers le serveur Internet (par Internet, cela prendrait trop de temps, même avec une connexion haut débit), mais seulement les fichiers qui auront été modifiés. Pour essayer cela, vous devez :

  • modifier une ou plusieurs pages du site et la (les) sauvegarder ;
  • dans la fenêtre Site - TP Dreamweaver, sélectionner le répertoire racine Z:\Sites Web\TP Dreamweaver ;
  • choisir la commande Sélectionner locaux plus récents du menu Edition ;
  • puis choisissez la commande Placer du menu Site.

Vous pouvez également uploader un fichier ou un dossier précis, en le sélectionnant dans la fenêtre Site - TP Dreamweaver avant d'exécuter la commande Placer du menu Site.


5
Création d'un tableau :
votre planning de la semaine.

Les tableaux sont fondamental en HTML. Ils permettent notamment de faire la mise en page. Pour vous entraîner, vous aller créer un tableau représentant votre emploi du temps.

Pour rélaliser ce tableau, vous aurez besoin de fusionner des cellules, déclarer les jours et les heures comme en-tête, et changer la couleur de fond des cellules. Pour cela, utiliserez les propriétés suivantes dans la fenêtre de propriété de la sélection :


6
Insertion d'images, images en miniature, texte alternatif.

Les images sont un élément important dans les pages Web. Elles présentent toutefois un problème : leur temps de téléchargement qui peut être long, notamment avec un modem RTC. Nous allons apprendre ici à redimensionner une image.

Vous devez :

Information sur... La taille maximale d'une page Web.

Le temps de téléchargement des pages Web sur Internet pose parfois problème. Pour avoir un ordre d'idée, les pages d'accueil devraient se télécharger en moins de 10 secondes. Puisque les modems RTC téléchargent à environ 6 ko/s, cela signifie que votre page (et toutes les images qu'elle contient) ne doit pas dépasser 60 ko.

Dreamweaver vous affiche, en bas à droite, cette information (taille de la page et temps de téléchargement pour un modem donné, par défaut 28.8 kbps). Surveillez cette information ! D'autant que si vous possédez l'ADSL ou le câble, vous ne pourrez pas vous rendre compte que votre site est trop lent sur certains modems.

On voit sur la capture ci-contre que cet atelier (page HTML + images) fait 94 ko et se télécharge en 14 secondes sur un modem 56 kbps. La vitesse du modem se règle dans le menu Edition, Préférences..., Barre d'état, Vitesse de connexion.

Information sur... L'optimisation du poids des images.

Pour les images, on distingue :

  • la taille : c'est la résolution de l'image, c'est à dire le nombre de pixels qui la constituent. On peut le nommer en colonnes et en lignes (par exemple 1600x1200) ou globalement, comme sur les appareils photos numériques (par exemple 3 MegaPixels, ce qui correspond à 2000x1500).
  • le poids : c'est le nombre de kilo-octets occupés sur le disque dur par le fichier. Le poids dépend de la taille de l'image, du nombre de couleurs, du format de compression, et du taux de compression. Un taux de compression élevé dégrade la qualité de l'image.

Pour les images insérées dans vos pages Web, retenez les principes suivants :

  • compressez toujours vos images, en général en .jpeg (Joint Picture Expert Group, de MPEG) pour les photos et .gif (Graphic Interchange Format, de Compuserve) pour les schémas et les captures d'écran. Ne mettez jamais d'images non compressés, ainsi le format .bmp (BitMaP, de Microsoft) est à proscrire.
  • avec les logiciels de dessin, jouez avec les taux de compressions pour obtenir le meilleur rapport qualité/poids. En JPEG, le poids d'une photo peut varier entre 500 ko et 10 ko selon le facteur de compression appliqué.
  • Rien ne sert de télécharger une grosse image pour l'afficher en petit (cela représente un gaspillage de bande passante) : ne rétrécissez jamais une image avec les options width et height de la balise img. Rétrécissez le fichier lui-même, il sera ainsi moins long à télécharger.

7
Pour aller plus loin.

On a vu ici les éléments de base de Dreamweaver, qui permettent de créer une page web basique et de gérer un site Web distant. Les possibilités de Dreamweaver sont bien sûr beaucoup plus évoluées. Voici quelques liens qui vous permettront de pousser plus loin l'utilisation de ce logiciel.

Profitez-en pour améliorer cette page, qui peut constituer une bonne base pour un site perso. Vous pourrez rajouter notamment :

Un énorme tutorial Dreamweaver 4. Sur la même page, vous trouverez des tutoriaux concernant d'autres outils de développement Internet.
http://www.biblioscript.com/references/index_documents.shtml
Livre Dreamweaver MX de Christophe Aubry. Cliquer sur l'image pour acheter ce livre chez amazon.fr.

La page d'accueil (en français) de Macromedia, l'éditeur de Dreamweaver.
http://www.macromedia.com/fr/


Sébastien PASTORE.