ExOmatiK.net : Collaboratif - Un site web de base avec Dreamweaver8

1. Présentation

D’après wikipedia :

Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type « tel écrit tel écran » (WYSIWYG en anglais :What You See Is What You Get : ce que vous voyez est ce que vous obtiendrez).

Dreamweaver offre deux modes de conception par son menu affichage. L’utilisateur peut choisir entre un mode création permettant d’effectuer la mise en page directement à l’aide d’outils simples, comparables à un logiciel de traitement de texte (insertion de tableau, d’image, etc). Il est également possible d’afficher et d’éditer directement le code (HTML ou autre) qui compose la page. On peut passer très facilement d’un mode d’affichage à l’autre ou opter pour un affichage mixte. Cette dernière option est particulièrement intéressante pour les débutants, qui à terme, souhaitent se familiariser avec le langage HTML.

2. Créer un mini-site avec Dreamweaver

Ce qui suit est une adaptation de l’excellent http://info.sio2.be/kpz/. Le but est de créer un site dont le schéma serait le suivant :

3. Un dossier bien organisé

3.1 Créer le dossier et le projet

Commençons par créer un répertoire nommé «www» pour stocker les pages web que nous allons créer (sur la copie d’écran suivante, on voit que le dossier a été créé sur le bureau).

Créons dans ce répertoire un répertoire «images» que ces pages afficheront

Démarrons Dreamweaver puis clic sur «Site Dreamweaver…»

3.2 Créer la page d’accueil (index.html)

Dans le champ «Nom du site», on pourra taper Mon site perso
Cliquer l’icône de «Dossier racine local» pour sélectionner le répertoire «www» que nous avons créé.
Cliquer l’icône de «Dossier des images par défaut» pour sélectionner le répertoire «images» du répertoire «www».

Maintenant, nous pouvons créer les pages web de noutre projet.

Pour cela nous allons enregistrer la page actuelle nommée «(untitled)» en faisant Fichier→Enregistrer puis en nommant la page «index.html»

Le nom «index.html» est le nom du fichier affiché par défaut par le serveur web qui rendra votre site accessible sur l’internet, il est donc important de réserver ce nom à la page d’accueil.

3.3 Créer les autres pages

Après avoir enregistré la page d’accueil, nous créons une nouvelle page en cliquant sur Fichier→Nouveau

On enregistre en faisant Fichier→enregistrer. Ensuite on renouvelle l’opération d’enregistrement pour créer nos trois autres pages.

4. Un menu pour bien naviguer

Afin de faciliter la navigation entre les différentes pages de notre site web, on aimerait proposer un menu comme celui-ci en haut de chaque page :

4.1 Des liens vers des pages du site

Après avoir tapé le texte de ce menu, on peut sélectionner le mot «Accueil». Avec un clic droit, on va créer un lien, il faudra alors indiquer vers quelle page il pointe. Ce qu’on fait en sélectionnant la page dans la liste :

De la même manière on va faire pointer les autres titres du menu vers les bonnes pages.

4.2 Des liens vers des pages extérieures au site

Là encore on sélectionne un texte et on clique droit et on va créer un lien mais cette fois, il faudra saisir l’URL (Uniform Resource Locator, littéralement « localisateur uniforme de ressource », autrement dit l’adresse) du site web vers lequel le lien devra pointer :

4.3 Des liens vers des adresses de courrier électronique

On sélectionne toujours un texte et on clique droit pour créer un lien mais cette fois il faudra saisir l’adresse email précédée de «» :

5. Un page bien composée

5.1 Des titres

Pour notre page d’accueil, nous allons placer un titre centré de grande taille sur fond coloré. Pour cela, commençons par saisir le texte sous le menu puis clic droit format de paragraphe (ici «En-tête 1» pour titre de niveau 1) :

Nous allons maintenant régler la couleur de fond de ce titre. Pour cela, clic droit Styles CSS→Nouveau…

Nous verrons plus tard l’intérêt de définir la CSS (Cascading Style Sheet : feuille de style) dans un fichier séparé mais pour le moment, on coche la case «Seulement ce document»

Il ne reste qu’à choisir la couleur darrière plan :

Afin de vérifier que tout cela correspond bien à la page web que nous souhaitons publier, on peut visualiser la page dans un navigateur en cliquant sur l’icône

5.2 Des images

Sous le titre, on souhaite insérer une image.

Tout d’abord plaçons l’image à afficher dans le répertoire «images» de notre projet.

Ensuite va cliquer sur Insertion→Image puis aller chercher la photo dans le répertoire «www/images».

Il faudra aussi rensigner le texte de remplacement à afficher en cas de problème de chargement de l’image (ou pour les navigateurs destinés aux aveugles).

Les dimensions d’une image affichée dans une page ne devraient jamais dépasser 500 pixels de large et 300 pixels de haut.

5.3 Des tableaux

Insertion→Tableau permet d’ajouter un tableau facilement dans une page

Ces différentes propriétés peuvent être lues dans le code html :

cellspacing : correspond à l’espacement entre les cellules
cellpadding : correspond à la marge intérieure des cellules
border : correspond à la largeur de la bordure

5.4 Des blocs

Afin de positionner le texte et les images dans une page, on va utiliser plutôt qu’un tableau, la méthode recommandée par le consortium W3C (http://www.w3.org/) : les blocs.

Cliquez sur Insertion→Objets mise en forme→Calque. Un cadre bleu apparaît. Il est possible d’en modifier la poistion et la taille.

En répétant l’opération, on pourra créer plusieurs blocs pour y positionner les éléments qu’on veut intégrer :

6. Le langage HTML

Voici le code html correspondant à page d’accueil :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Document sans nom</title>

  <style type="text/css"> 
  <!--
  .Style1 {
	background-color: #00FFFF;
  }
  .Style2 {
	font-size: 14px;
	background-color: #FFFF00;
	text-align: center;
  }
  -->
  </style>
 </head>

 <body>
  <p>
   <a href="index.html">Accueil</a> | 
   <a href="loisirs.html">Loisirs pr&eacute;f&eacute;r&eacute;s</a> | 
   <a href="chanteur.html">Chanteur favori</a> | <a href="chinois.html">Portrait chinois</a> |
   <a href="http://www.lemonde.fr">Site web pr&eacute;f&eacute;r&eacute;</a> |
   <a href="mailto:nom@domaine.fr">M'&eacute;crire</a>
  </p>

  <h1 align="center" class="Style1">Dominique Dupond </h1>

  <p align="center"><img src="images/moi.png" alt="ma photo" width="200" height="228" /></p>
  <p align="center" class="Style2">Ma classe: 7G </p>

 </body>
</html>

La première ligne indique le «doctype» : la déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite. Ici «XHTML 1.0 Transitional». Cette déclaration permet de vérifier la syntaxe du document via le validateur du consortium W3C (http://validator.w3.org/) qui saura alors à quel modèle se référer.

On entre alors dans la balise <html> puis <head> dans laquelle diverse informations sur la page sont déclarées : titre, encodage des caractères, auteur… Mais aussi définition des styles utilisés par la suite.

la balise <head/> se ferme et on entre dans <body>. C’est le corps de la page : le contenu proprement dit. Sans entrer dans les détails de la syntaxe, la balise <a href=“lien.html”>cliquezMoi<a/> indique un lien hypertexte dont le texte est «cliquezMoi» et qui pointe vers lien.html. La balise <h1..> désigne un titre de niveau 1 dont la mise en forme est définie par le style «Style1».

Le code html se termine par la fermeture des balises encore ouvertes : <body/> et <html/>

Cliquez sur l’animation suivante :

source : http://info.sio2.be/kpz/2/3.php :

7. Mettre le site en ligne chez un hébergeur

7.1 Un hébergeur gratuit ou payant

D’après Wikipédia :

Un hébergeur Internet (ou hébergeur Web) est une entité ayant pour vocation de mettre à disposition des internautes des sites web conçus et gérés par des tiers.

Il donne ainsi accès à tous les internautes au contenu déposé dans leurs comptes par les webmestres souvent via un logiciel FTP ou un gestionnaire de fichiers. Pour cela, il maintient des ordinateurs connectés 24 heures sur 24 au réseau internet (des serveurs web) par une connexion à très haut débit (plusieurs centaines de mbps), sur lesquels sont installés des logiciels : serveur web (souvent Apache), serveur de messagerie, de base de données …

7.2 Le ftp

Le protocole permettant de déposer les fichiers (html, images…) sur le serveur de l’hébergeur se nomme FTP pour File Transfert Protocole. Pour l’utiliser il faut utiliser un logiciel appelé client FTP. Il en existe de nombreux. Nous utiliserons le plus célèbre des clients FTP libres : FileZilla. On peut télécharger une version portable de FileZila sur le site framakey.org:
http://www.framakey.org/Portables/PortableFilezilla

Après avoir dézippé l’archive et lancé Filezilla, il faudra renseigner

L’adresse du serveur ftp
l’identifant pour s’y connecter
le mot de passe

(ces trois informations vous ont été communiquées par votre hébergeur)

Cliquez sur «Quickconnect»

Sous la fenêtre d’informations sur les étapes de connexion, les deux fenêtres disposées horizontalement présentent

À gauche le contenu de votre disque dur
À droite le contenu du répertoire qui vous est dédié sur le serveur chez l’hébergeur