Création ou mise à jour de page web

Michel MARTIN, mise à jour de janvier 2008

 

Plan

Aspects juridiques

 

Dreamweaver Version MX 2004
Exercices d'adaptation pour les débutants qui ont déjà construit un site avec un autre logiciel....

 

1. Installation d'un nouveau site dans Dreamweaver MX

Vous devez avoir créé dans votre disque dur un nouveau dossier MonSite qui contiendra tout votre site.
- menu Site / Gérer les sites / Nouveau / site /
- remplissez les lignes Nom, Dossier racine (C:\MonSite\), cochez "actualiser liste fichiers locaux"
- rien dans la ligne http:// pour aujourd'hui car je sépare toujours dans la formation la création locale d'un page et sa mise en ligne sur le net en utilisant un autre logiciel pour la mise en ligne...
- cochez "activer le cache"
Si le dossier MonSite contient déjà des pages web, des images... Dreamweaver les analysera...

Dans le menu Fenêtres : cochez au minimum Insertion, Propriétés, Fichiers
La fenêtre Propriétés est essentielle pour la mise en page du texte et des images...

 

2. Modifier une page existante :

menu Fichier / Ouvrir cette page.
La fenêtre Propriétés contient tous les attributs de mise en page d'un traitement de texte, la création d'un lien, etc... toutes transformations appliquées à la sélection de texte que vous aurez préalablement faite...

Observez bien en haut de la fenêtre d'écriture de la page web les 2 modes de travail : par défaut Création et pour les experts Code.

 

3. Créer une nouvelle page :

menu Fichier / Nouveau/ Page de base ou Modèle si vous en avez / Créer...

Enregistrer votre page dans le dossier souhaité. Cette réflexion est primordiale : le rangement ne peut pas être désordonnée, il lui faut une logique. Sans une arborescence précise, le site deviendra vite non maîtrisable...

Pour attacher votre feuille de style si vous en avez une : menu Texte / Style CSS / Gérer styles / Joindre / Parcourir le disque dur pour la touver... Cocher lien / Terminé.
Une ligne du type <link href="../styles/style1.css" rel="stylesheet" type="text/css"> figure alors entre les balises <head> et </head> mais vous ne la verrez qu'en mode de travail Code.

Pour les débutants, le plus simple pour conserver la même "charte graphique" est d'ouvrir une page existante, de l'enregistrer sous un nouveau nom, puis d'en effacer le contenu !

N'oubliez-pas de changer le titre de la nouvelle page créée par le menu Modifier / Propriétés de la page / Titre...

 

4. Exploiter une feuille de style pour homogénéiser les pages :

Cliquez sur ce lien : http://www.lycee-international.com/styles/style1.css
puis observez la page ouverte automatiquement dans Dreamweaver :
c'est la feuille de syle du site du lycée...

Vous y distinguez :
des syles de paragraphes : titre, sous-titre, texte, etc...
de fond de page,
des styles de liens...

Vous pouvez enregistrer cette feuille de style dans un sous-dossier styles, puis la modifier par le menu Texte / Styles CSS / Gérer les styles / style1.css / Modifier...

Une ligne du type <link href="../styles/style1.css" rel="stylesheet" type="text/css"> doit figurer entre les balises <head> et </head> mais vous ne la verrez qu'en mode de travail Code.

 

5. Intégrer des images ou photos, tableaux :

La page htm est avant tout une page de texte. Les images sont des objets distincts qui s'intègrent comme des caractères, par le menu Insertion / Image. La disposition des images peut s'ordonner dans des tableaux aux traits invisibles (menu Insertion / Tableau...). Si l'image est trop grande et que vous la réduisez dans Dreamweaver, il suffit de sélectionner le tableau pour le retrouver à sa bonne taille...

Le problème technique des photos numériques est leur poids qui ne doit pas entraîner une trop longue attente pour charger la page au travers des lignes téléphoniques et leur taille qui de nos jours dépasse le nombre de pixels affichables sur un écran... Il faut donc réduire la taille et la qualité des images.
Bien que l'on puisse obliger une photo à s'afficher dans le cadre souhaité plus petit, il est important de prévoir sa taille avant de l'insérer dans le site pour alléger et donc accélérer le téléchargement. Tous les logiciels photos font cela par le menu Image / Taille ou Redimensionner l'image....

Rappel des notices que j'ai publiées dans le chapitre photos numériques :

Taille :
Raisonnez en pixels (points lumineux) et non en cm. L'écran moyen du net est actuellement 1024x768 pixels, dont une partie est consommée par le logiciel de navigation !
A vous de fixer la taille de votre image, sachant que les appareils photos actuels dépassent 2500 pixels en largeur !
Vous devez ensuite utiliser un logiciel de traitement d'images comme Photoshop, photofiltre, XNview, Gimp... pour régler sa taille en pixels et sa compression (voir les autres "Cours en ligne").
Exemple :
photo sortie de l'appareil photo : 2272x1704 pixels, 1850Ko.
photo redimensionnée : 400x300 pixels, 118Ko.
photo redimensionnée, qualité compressée à 90% : 400x300 pixels, 46Ko.

Formats :
2 formats répandus sur le net
- jpg ou jpeg : photos numériques courantes en millions de couleurs. C'est un format compressé destructif, dont on peut régler la compression.
- gif : pour les logos ne dépassant pas 256 couleurs (logos, boutons, schémas...). C'est un format de compression sans dégradation. Il permet également le gif transparent, animé... (nombreuses banques de gifs tout prêts sur le net)
- le format png est récent.

ATTENTION aux photos de personnes :
Je rappelle :
- la loi française et européenne... : aucune publication de photo sans l'autorisation écrite de la personne, adulte ou mineure ( signature des parents pour un mineur).
- le charte académique à respecter, au bas de cette page.

Galleries de photos :
Elle se présente souvent sous la forme d'une page de petites "vignettes" ordonnées dans un tableau, chacune ayant un lien vers l'image agrandie (donc 2 objets distincts par photo). Les galleries de photos avec vignettes et agrandissements possibles... ne sont pas aisées à réaliser avec Dreamweaver, mais de nombreux outils gratuits existent sur internet, comme JAlbum (en français) à télécharger sur www.01net.com ou Webthumb...

 

 

Dreamweaver Version 2
Exercices de formation pour grands débutants

 

1. Installation de Dreamweaver2

Depuis sa diffusion gratuite dans des périodiques, il y a quelques années, cette version circule sur le net...
Tapez Dreamweaver2 dans www.google.fr et vous trouverez un téléchargement disponible...
Après installation, à tout moment, la touche F1 ouvrira l'aide en ligne, avec un index volumineux.

 

2. Lancer Dreamweaver :

3 fenêtres d'outils apparaissent par défaut : Propriétés de l'objet sélectionné, Objets, Lanceur.
Définissez un nouveau site par le menu Fichier / Nouveau site.
Remplissez le champs Nom = SiteTest,
puis le champ Dossier racine local en cliquant sur le bouton de droite
pointez le disque D: puis cliquez l'icone création d'un nouveau dossier : SiteTest.
Enregistrez. Validez par OK; Acceptez la création d'un cache... Fermez la fenêtre.
C'est dans ce dossier que les pages, les images, etc... seront enregistrées pour pouvoir ultérieurement être téléchargées vers l'opérateur qui vous affectera un dossier unique. Un site internet est un ensemble de pages reliées entre elles : la 1ère page étant souvent un "menu" permettant plusieurs aiguillages de lecture dans telle ou telle direction... A la différence des pages de traitement de texte, les images sont ici des objets enregistrés à part.

 

3. Création de pages contenant du texte :

Ecrivez du texte, par exemple "Page 1";
Cet élément peut être amélioré comme dans un traitement de texte grâce aux fonctionnalités de la fenêtre "Propriétés" : polices Times New Roman ou Arial, taille, couleur, disposition, retraits. Sélectionnez "Page 1" et appliquez les propriétés : Polive = Verdana, Taille = 7, Couleur = rouge, Centré.

Ecrivez plus bas "Suite vers page 2" avec les propiétés : talille 3, italique, couleur noire... par exemple !
Enregistrez cette page sous le nom page1 dans le dossier D:\SiteTest\

La commande Fichier / Aperçu dans le navigateur / iexplore ou autre... permet de visualiser la page créée. Fermez ensuite la fenêtre du navigateur.
En cas d'échec, ouvrez l'explorateur, puis double clic sur le fichier D:\SiteTest\page1.htm

Remarques :
- lorsque vous traiterez de grandes quantités de texte venant d'ailleurs, pensez que le notion de "Paragraphe" (propriété format) est fondamentale : certains attributs que vous apporterez au texte ne s'appliquent qu'au paragraphe (disposition, retraits... cas de cettte remarque).
- Ainsi le retour à la ligne entraîne par défaut le changement de paragaraphe et un saut de ligne. Si vous souhaitez ne pas sauter de ligne : tapez sur les 2 touches Maj et Enter au lieu de la seule touche Enter.

Cette page apparaît comme un document sans titre en haut de l'écran.
Menu Modifier / Propriétés de la page.
Donnez un titre à cette page : c'est celui que le lecteur verra tout en haut du navigateur. Il servira également aux moteurs dans le référencement de votre page, ce qui aidera les lecteurs dans leur recherche si tous les mots clés utiles y figurent...
Indiquez aussi la couleur d'arrière-plan, du texte, du lien, des liens visités, des liens actifs...

Ouvrez une nouvelle page vierge par Fichier / Nouveau. Ecrivez du texte, par exemple "Suite vers page 2".

 

4. Création de liens dans la page 1 :

Lien interne de la page 1 vers la page 2 :
Affichez de nouveau la page 1 : sélectionnez l'expression "Suite vers page 2", cliquez le bouton "dossier" situé à droite de la ligne "Lien" dans la fenêtre "Propriétés".
Sélectionnez le fichier page2.htm, cliquez le bouton "Sélectionner".
Le lien page2.htm apparaît dans la fenêtre "Propriétés" en même temps que l'expession "Suite vers page 2" se souligne !
Enregistrez la modification de la page 2.

Lien vers un site externe :
Sélectionnez le texte qui doit activer ce lien, puis dans la fenêtres des propriétés, champ lien : tapez l'adresse compète de la page du site visé
(exemple : http://www.lycee-international.com/eleves/coursenligne.htm)

Tests des liens crés :
La page 1 étant affichée, suivez le menu Fichier / Aperçu dans le navigateur / iexplore ou autre, pour observer la page vue par un internaute et activez les liens...

 

5. Visite du code html écrit :

Cliquez sur le bouton <HTML> de la fenêtre Lanceur pour lire le code :

<html>
<head>
<title>accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<p><font size="7" face="Verdana, Arial, Helvetica, sans-serif" color="#FF0000">page 1</font> </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="page2.htm">Suite vers page 2</a></p>
</div>
</body>
</html>

 

6. Insertion d'une image :

La page htm est avant tout une page de texte. Les images sont des objets distincts qui s'intègrent comme des caractères.
Le problème technique des images est leur poids qui ne doit pas entraîner une trop longue attente pour charger la page au travers des lignes téléphoniques et leur taille qui de nos jours dépasse le nombre de pixels affichables sur un écran.. Il faut donc réduire la taille et la qualité des images.

Affichez dans Dreamweaver la page 1 ou 2.
Cliquez à l'endroit de l'insertion de l'image, puis sur le menu Insertion/Image ou sur le bouton Image de la fenêtre Objets. Allez chercher l'image souhaitée puis cliquez le bouton Sélectionner.
Pour la positionner, ne la sélectionnez pas, placez le curseur à sa droite ou à sa gauche car le langage html place les images comme des caractères sur la ligne.
Pour une disposition fine et imposée, il faut créer des tableaux.
IMPORTANT : il est possible de plaquer un lien sur une image sélectionnée.

Rappel des notices que j'ai publiées dans le chapitre photos numériques :

Taille :
Raisonnez en pixels (points lumineux) et non en cm. L'écran moyen du net est actuellement 1024x768 pixels, dont une partie est consommée par le logiciel de navigation !
A vous de fixer la taille de votre image, sachant que les appareils photos actuels dépassent 2500 pixels en largeur !
Vous devez ensuite utiliser un logiciel de traitement d'images comme Photoshop, photofiltre, XNview, Gimp... pour régler sa taille en pixels et sa compression (voir les autres "Cours en ligne").
Exemple :
photo sortie de l'appareil photo : 2272x1704 pixels, 1850Ko.
photo redimensionnée : 400x300 pixels, 118Ko.
photo redimensionnée, qualité compressée à 90% : 400x300 pixels, 46Ko.

Formats :
2 formats répandus sur le net
- jpg ou jpeg : photos numériques courantes en millions de couleurs. C'est un format compressé destructif, dont on peut régler la compression.
- gif : pour les logos ne dépassant pas 256 couleurs (logos, boutons, schémas...). C'est un format de compression sans dégradation. Il permet également le gif transparent, animé... (nombreuses banques de gifs tout prêts sur le net)
- le format png est récent.

ATTENTION aux photos de personnes :
Je rappelle :
- la loi française et européenne... : aucune publication de photo sans l'autorisation écrite de la personne, adulte ou mineure ( signature des parents pour un mineur).
- le charte académique à respecter, au bas de cette page.

Galleries de photos :
Elle se présente souvent sous la forme d'une page de petites "vignettes" ordonnées dans un tableau, chacune ayant un lien vers l'image agrandie (donc 2 objets distincts par photo). Les galleries de photos avec vignettes et agrandissements possibles... ne sont pas aisées à réaliser avec Dreamweaver, mais de nombreux outils gratuits existent sur internet, comme JAlbum (en français) à télécharger sur www.01net.com ou Webthumb...

 

7. Insertion d'un tableau :

Les tableaux sont indispensables : sans bordure apparente (bordure=0) c'est la façon la plus facile et "légère" de disposer les objets textuels ou graphiques dans une page.
Cliquez à l'endroit de l'insertion du tableau souhaité, puis menu Insertion/tableau ou cliquez sur le 2ème élément de la fenêtre des objets...
Répondez aux questions...
Remplissez le tableau de textes ou d'images : la dimension des cellules s'adapte.

Formatages divers :
A savoir : la fenêtre des propriétés dépend de l'objet sélectionné.
- Si vous sélectionnez l'entourage du tableau entier par clic droit, vous pourrez grâce à la fenêtre des propriétés de l'objet Tableau, le centrer, régler sa taille à 80% de l'écran du lecteur quel qu'il soit (très pratique parfois)...
- Si vous sélectionnez les lignes, vous pourrez centrer les écritures...
- Pour régler vous-même la largeur des colonnes, cliquez les traits verticaux et déplacez-les.
- etc...

 

8. Ancres nommées :

ou comment relier dans une même page le Plan situé en haut de la page et le chapitre 6 placé beaucoup plus bas dans la même page.
C'est en fait un repère qui peut être atteint par un lien.
Cliquez à l'endroit précis où cette ancre doit être visée par le lien.
Menu Insertion / Ancre nommée : donnez un nom à cette ancre (pas d'accent, un mot court...).
Sélectionnez le texte du Plan qui doit pointer vers cette ancre puis écrivez ce lien dans la fenêtre des propriétés sous la forme #nom de l'ancre

 

9. Formulaire :

permettant à un internaute de remplir les champs que vous avez définis et de vous envoyer ce questionnaire rempli dans votre boîte aux lettres électronique.
Menu Insertion / Formulaire pour définir une zone formaulaire à remplir dans la page web.
Remplissez le champ action de la propriété du formulaire : mailto:email de réception.
Menu Insertion / objet du formulaire autant de fois que vous voulez... pour des champs texte, liste, bouton radio ou case à cocher,
enfin Bouton (action d'envoyer le message).

 

Conseils et consignes à ceux qui me
transmettent une page à mettre en ligne
sur le site du lycée...


 

Quels logiciels utiliser pour créer des pages au format htm (ou html) ?

Peu importe, pourvu que le code html soit standard, pour être lu par tous les navigateurs et pour permettre à d'autres créateurs de modifier plus tard votre écriture. C'est un travail d'équipe...
Beaucoup de logiciels libres existent maintenant...
Evitez les logiciels créant un code "propriétaire".
Dreamweaver 2, distribué gratuitement il y a quelques années, est un outil suffisant pour les débutants...

 

Documents :

Compressez-les au format pdf lisible sous Acrobat Reader ou autre reader...
De plus cela protège un peu vos droits d'auteur...
Il existe des logiciels gratuits pour cela, comme la suite OpenOffice ou "pdfcreator", téléchargeables sur le net (www.telecharger.com)

 

Quelles polices d'écritures dans une page html ?

Prenez les polices de base des éditeurs html.
En effet, les polices vues par le lecteur seront celles disponibles dans son ordinateur.

Pour faire ressortir une écriture, ne soulignez pas (c'est le code du lien hyper-texte sur le web), utilisez le gras, les tailles des caractères et les couleurs des polices.

La table des caractères utilisés doit être la plus standard possible, pour que tous les caractères soient affichés sur les moniteurs des lecteurs, sur PC ou MAC. On peut la vérifier dans le code html : la ligne "meta" situé après <Head> doit contenir l'écriture charset=iso-8859-1 
Cette table de caractères affiche l'euro.

 

Images :

La page htm est avant tout une page de texte. Les images doivent être des objets distincts qui s'intègrent comme des caractères. Veuillez me les transmettre à part.
Le problème technique des images est leur poids qui ne doit pas entraîner une trop longue attente pour charger la page au travers des lignes téléphoniques. Il faut donc réduire la taille et la qualité des images.

Taille et format des images :

Raisonnez en pixels (points lumineux) et non en cm. L'écran moyen du net est actuellement 1024x768 pixels, dont une partie est consommée par le logiciel de navigation !
A vous de fixer la taille de votre image.
Formats : 2 formats répandus sur le net
- gif : pour les images ne dépassant pas 256 couleurs (logos, boutons, schémas...). C'est un format de compression sans dégradation. Il permet également le gif transparent, animé... (nombreuses banques de gifs tout prêts sur le net)
- jpg ou jpeg : pour les photos en millions de couleurs. C'est un format compressé destructif, dont on peut régler la compression.
Le format png est récent.

Vous devez ensuite utiliser un logiciel de traitement d'images comme Photoshop, XNview, Gimp... pour régler sa taille en pixels et sa compression (lire Cours en ligne / Photoshop / Traitement d'image minimal).

Photos de personnes :
Respectez les lois françaises : pas de photo de mineurs en gros plan, sans autorisation écrite des parents.
Une galerie de photos doit se présenter comme une page de petites "vignettes" ordonnées dans un tableau, chacune ayant un lien vers l'image agrandie (donc 2 objets distincts par photo). Il existe des logiciels gratuits construisant automatiquement ces pages html comme JAlbum (en français) ou Webthumb.

 

Noms des fichiers-pages et répertoires :

Noms courts, en minuscules, pas d'accent, pas de caractère étranger, pas de point, pas d'espace (utiliser- ou_).
Suffixe html ou plutôt htm pour simplifier !
Première page : index ou default ou accueil, avec lien de retour à http://www.lycee-international.com.
N'oubliez-pas de donner un titre en plusieurs mots à chaque page (notion distincte du nom du fichier).  

 

Erreurs fréquentes dans l'écriture des liens :

Tous les fichiers (pages, images) doivent être rangés dans le ou les répertoires définitifs pour que l'écriture des liens soit transportable chez l'opérateur hébergeant le site.
Vous devez absolument vérifier l'écriture relative du chemin associant une image ou indiquant le lien vers une autre page : aucune arborescence de votre ordinateur C:\ ou D:\ ne doit figurer. L'opérateur qui héberge notre site n'aura jamais la même arborescence !
Malheureusement, certains composeurs enregistrent parfois des chemins complets dits absolus.
Pour contrôler (indispensable) et corriger éventuellement les liens de vos créations, avant de me les donner, vérifiez leur fonctionnement sur un autre ordinateur ou éditez le code source HTML dans votre composeur (ou simplement dans le bloc-notes des Accessoires de Windows).

Exemples décritures correctes :
<img src="section.gif">
    insertion de l'image section.gif rangée dans le même répertoire que la page htm qui contient cette écriture.
<a href ="linda.htm">
    écriture du lien vers une page contenue dans le même rép.
<a href="../struct_gb.htm">
    écriture du lien vers la page struct_gb.htm située dans le rép. juste au-dessus.
Ces codes sont barbares, mais c'est le composeur qui les écrit !

Autres consignes :

- harmonisation des couleurs, polices, tailles dans un même chapitre.
- fonds noirs : à éviter (problèmes d'impressions).
- frames ou cadres :
à éviter, car mal vues par les moteurs de recherche ! Préférer les tableaux pour fixer l'emplacement des objets dans la page.
- tableaux :
largeur en % de la page pour s'adapter aux différents écrans des lecteurs ou largeur figée en pixels : le choix est à faire !
  

 

Aspects juridiques

 

Liste de sites de référence

Charte académique à respecter

Foire aux questions des webmestres de l'académie

Photo d'enfants ou d'adultes : extrait des fiches pratiques du site www.foruminternet.org/

Par principe, toute personne, quels que soient sa notoriété et son âge, dispose sur son image et sur l'utilisation qui en est faite d'un droit exclusif et peut s'opposer à sa reproduction et diffusion sans son autorisation. Ce principe est issu de l'article 9 du Code civil.

En ce qui concerne les enfants mineurs, pour rediffuser l'image du mineur sur laquelle celui-ci est reconnaissable sur un site internet, il est nécessaire d'obtenir avant la diffusion l'autorisation préalable, expresse et écrite des titulaires de l'autorité parentale.

Dès lors que l'autorité parentale est exercée conjointement, les deux parents devront donner leur accord pour la publication d'une photographie de leur enfant. Si une seule personne est titulaire d'une telle autorité, son autorisation suffira.

Notez que le caractère reconnaissable d'une personne peut être étendu à tout signe distinctif permettant de la reconnaître (particularités physiques, vestimentaires.).

La diffusion d'une telle photographie sans autorisation est susceptible d'engager la responsabilité de la personne qui en est à l'origine, notamment pour atteinte au respect de la vie privée.