Commencer par créer une nouvelle page htm en cliquant sur le menu Fichier / nouveau fichier: .

Dans le répertoire local apparaît le fichier "untitled.htm" : renommez -le aussitôt par "page01.htm"

Double clic sur le nom de ce fichier : la fenêtre de votre nouvelle page s'ouvre : Disposez ces 3 fenêtres ainsi :

Figure 23. Disposition des boîtes de dialogue

On commence par définir un certain nombre de propriétés en appelant la commande "Propriétés de la page" située le Menu "Modifier"

Figure 24. Boîte de dialogue "propriétés de la page"

Donner un titre à la page

Laisser pour l'instant le champ Image d'arrière plan vide

Choisir une couleur d'arrière plan

Choisir une couleur de texte.

Laisser tout le reste sans modification

Cliquer sur "Appliquer" , puis OK

Enregistrez - là.

On commence par le titre : Saisir le texte "ATHENES 2004 : SERONT-ILS PRÊTS ?" en taille 6, caractères gras

Insérer ensuite 1 calque : Menu Insertion / calque : on peut le déplacer où l'on veut, lui changer sa taille , sa couleur d'arrière plan, en utilisant la fenêtre de propriétés. Dans un calque on peut placer tout ce que l'on veut : texte, image, tableau , etc.

Insérer un texte existant dans un cadre de calque: pour cela, ouvrir le document "esprit olympique.doc" situé dans le dossier "Olympe" de la bibli. Sélectionnez le 1er paragraphe, puis copiez-le , revenez à votre page, placez le curseur à l'intérieur du calque, puis >clic sur Edition / Coller comme texte. Donner ensuite au texte, grâce à la fenêtre de propriétés, une apparence agréable : police, couleurs, paragraphes, couleur arrière plan etc.

Insérer 1ère image dans un calque : Insérer un nouveau calque, puis repérer le fichier "athens2004.jpg" dans la fenêtre de répertoire du site, avec la souris, cliquez sur ce fichier en restant appuyé, puis transportez le fichier jusqu'au calque recevant l'image , lâchez alors la souris. --> travail d'observation sur la fenêtre de propriétés : selon que l'on sélectionne le calque ou l'image, observez les propriétés ( nom de l'image, position etc.) Si l'on veut un encadrement de couleur à l'image : sélectionnez l'image et indiquez en pixel, l'espace souhaité verticalement et horizontalement.Puis sélectionnez le cadre du calque et attribuez lui une couleur d'arrière plan qui tranche avec celle de la page.

Figure 26. Propriétés d'une image

Insertion d'image , à l'intérieur d'un texte : sélectionner le cadre de texte, élargir aux 2/3 de la page puis, insérer l'image "embleme jeux.jpg" juste après le mot natal ( 1er paragraphe) . Sélectionner alors l'image, et observer, dans les propriétés, l'effet d'alignement : par défaut - ligne de base - haut - milieu - droite gauche

Fin des insertions : insérer encore 2 calques, l'un pour la 2e partie du texte, l'autre pour la 3e image "athletesantiques.jpg"

Organisation complète de la page, enregistrement , puis vérification dans le navigateur (touche "F12")

Ouvrir, dans le dossier "Olympe" de la bibliothèque, le fichier "histoirejeux.htm", l'enregistrer aussitôt dans le dossier de travail sous le nom "page03a.htm".

Cette page est très longue ; elle contient un plan . Pour éviter au lecteur d'utiliser sans cesse les ascenseurs ou le défilement de la page de haut en bas, on utilise le système de liens par "ancres nommées" : Ainsi, commençons par installer ces ancres en 8 lieux : au début : devant le titre de la page, et en tête de chacun des 7 chapitres

Pour cela : placer le curseur devant le titre, en haut de page ; puis dans le menu, clic sur Insertion / ancre nommée.indiquer un nom pour cet ancrage, puis recommencer cette opération devant chaque début de chapitre.

Figure 29. Définition d'une ancre

Ensuite, il faut créer la navigation : c'est à dire, créer des liens dans le plan en haut de page, qui envoient vers les ancres, et créer pour chacun des chapitres, un lien de retour vers le plan. Pour ce lien de retour , on pourra utiliser la flèche triangulaire rouge. Pour chaque opération, on utilise l'icône de pointeur dynamique de la fenêtre de propriétés en pointant chaque fois sur l'ancre souhaitée.

Vérifier l'effet en lançant l'aperçu dans le navigateur.

Créer une nouvelle page, l'enregistrer sous "page03.htm"

Dans le menu Modifier / Propriétés de la page, choisir une couleur de fond et une couleur de police ( au passage: on peut agrémenter le fond avec un arrière plan de texture - à choisir dans la bibli : dans le champ [image d'arrière plan], clic sur parcourir, et rechercher dans le dossier bibli : "Arrière plans" ou "outilsweb", par exemple le fichier image : "beigeclair")

Saisir le texte suivant pour le titre : " Une page Web, ça crée des liens ..."; insérer une barre horizontale ( Menu Insertion / Barre horizontale

Pour le corps de texte, saisir au clavier :

" On appelle "lien" ou lien hypertexte, une zone de la page , sensible au clic ou au passage de souris, et qui permet d'afficher d'autres parties de la page, du site, ou bien des pages extérieures au site. Voici plusieurs exemples : 
pour un lien interne au dossier (du site que je construis) >>> cliquer ICI " 

D'abord sélectionner le mot "ICI" : pour créer le lien trois méthodes :

Spécifier la valeur "contenu" dans le champs "cible"

Saisir ensuite au clavier :

"pour un lien interne à la page : (cas d'une page longue) >>> voir exemple 2 
pour des liens externes à la page : (vers un autre site) >>> voir exemple 3 
"pour des liens internes à partir d'images >>> voir exemple 4 

les mots "voir exemple x" serviront comme liens pour les pages 4, 5 et 6 que l'on va construire maintenant.

Si l'on souhaite créer une référence vers un site extérieur au dossier, les liens externes se créent de façon tout aussi simple, il suffit d'indiquer dans le champ "lien" de la fenêtre de propriétés, l'adresse complète du site souhaité.

Ouvrir la page "page03b.htm", dans le dossier "modèles", puis enregistrer la page dans votre dossier de travail sous le nom : " page03b.htm"

La page présente des liens vers des sites concernant les jeux olympiques : vous allez y rajouter un lien vers le site officiel des Jeux Olympiques 2004 d'Athènes

Ajouter une ligne explicite , puis créer le lien . L'adresse est : http://www.athens2004.com/athens2004/page/home?lang=fr

<a href="fichier page html" target="nom du cadre ou la page sera affichée">Lien</a>

Créer une nouvelle page, dans le dossier de travail, l'enregistrer sous " page03c.htm" . Choisir les couleurs . L'idée est de construire une page avec des images actuelles et anciennes ( maquettes) du site d'Olympie, dans le Pélopponèse. La page devra se composer de 4 images miniatures, renvoyant à des images agrandies, du site géographique actuel, tel qu'on peut le visiter. et d'une ou deux images du site ancien ( maquettes) . Tous les fichiers images nécessaires sont dans le dossier "images" . ( "olym arrivee min.jpg" etc.) Pour avoir une idée du résultat, voir la page "page06.htm" . Vous pouvez organiser la page selon vos goûts et avec les couleurs et le texte (pas trop long) de votre choix.

Pour installer les images, créez autant de calques que nécessaire et positionnez les sur la page.

Pour les images agrandies, il faudra créer un fichier htm par image agrandie.

Lorsque ce sera fait, il faut créer la navigation : sur la page de départ, sélectionner une miniature et indiquer le fichier cible ( la même image, agrandie). Répéter pour les 4 miniatures

Ensuite, sur les fichiers images agrandies, il faut créer le lien de retour : on peut le faire en sélectionnant l'image elle même.( voir videoprojecteur)

Vérifier chaque fois l'aperçu dans le navigateur. Fin de l'exercice.

Plus difficile : exercice plus délicat : créer des zones sensibles, à l'intérieur d'ue image : pour voir l'effet, ouvrir dans le navigateur, la page "modele06.htm" : cette fois, si vous cliquez sur l'image de maquette de gauche, et plus précisément sur le temple, au centre , une autre page s'ouvre : ceci est possible car sur la 1ère image, on a créé une zone lien : Cliquer sur l'image, pour la sélectionner, et dans la fenêtre de propriétés, cliquer sur le bouton "carte graphique", l'éditeur permet alors de sélectionner avec l'aide d'outils (cercle - rectangle - polygone), une zone, qui sera liée au fichier placé dans le champ "Lien"

Figure 31. Définition de zones liées sur une image

Créer une nouvelle page nommée "page06.htm".

Copier le répertoire "script" situé dans le repertoire modèle et coller le dans votre répertoire.

Commander l'insertion d'une appliquette depuis la boîte de dialogue "objet" bouton "aplliquette".

Figure 32. Insertion d'une appliquette

Spécifier l'emplacement de l'appliquette ainsi que sa taille à l'aide indications ci-dessous.

1 - Insérer le script "lake.class" situé dans le repertoire script
2 - Indiquer une taille de 337*400 pixels
3 - Passons au paramètrage du script

Figure 33. Paramètrage de l'appliquette

Copier le code suivant et insérer le au code html de votre page.

Spécifier la cible en début de code => var target = "blank"

Revenir au mode graphique de DW et sélectionner la forme intégrée au script.

Afficher les valeurs de la liste depuis le gestionnaire d'objet.

Définir vos liens.

Récupérer l'appliquette SlickTree.class et déposer là dans le répertoire ou vous allez créer votre menu.

Copier le code de l'appliquette suivante et insérer le au code html de votre page

<applet code="SlickTree.class" codebase="./" align="baseline" width="140" height="160">
        <param name="AppletHomePage" value="http://go.to/javabase">
        <param name="submit23" value="Test Applet">
        <param name="bgColor" value="FFFFFF">
        <param name="textColor" value="000000">
        <param name="textFont" value="Times;r;12">
        <param name="optionColor" value="FFFFFF">
        <param name="showOptionEffect" value="shrink">
        <param name="optionDraw" value="fill">
        <param name="mouseTextColor" value="FFFFFF">
        <param name="mouseTextFont" value="Times;bi;12">
        <param name="mouseOptionColor" value="000000">
        <param name="mouseOverEffect" value="left">
        <param name="mouseDraw" value="fill">
        <param name="submit232" value="Test Applet">
        <param name="delayTime" value="20">
        <param name="visibilityStep" value="2">
        <param name="mouseOverStep" value="4">
        <param name="showDelay" value="10">
        <param name="submit2322" value="Test Applet">
        <param name="spacing" value="20">
        <param name="gap" value="1">
        <param name="rounding" value="5">
        <param name="showDepth" value="1">
        <param name="submit22" value="Test Applet">
        <param name="menu" 
        value="{Item1} { page1,page01.htm,self} 
               {Item2} { page2,page02.htm,self} { page3,page03.htm,self} 
               {Item3} { page4,page04.htm,self}">
        <param name="submit2" value="Test Applet">
      </applet></td>

Modifier au besoin de la taille de l'appliquette (en début de code)

Définissez vos items et liens en fin de code de la manière suivante :

{Item1} { page1,page01.htm,self} => 1er niveau contenant 1 lien qui sera affiché dans la cadre d'origine
{Item2} { page2,page02.htm,blank} { page3,page03.htm,blank => 2ème niveau contenant 2 liens qui seront affichés dans une nouvelle fenêtre
{Item3} { page4,page04.htm,top} 3ème niveau contenant 1 lien qui sera affiché en suppriman tous les cadres

Créer une nouvelle page nommée index.htm

Dans le menu < Modifier >, sélectionner < Jeu de cadres > et commander "fractionner le cadre à gauche"

Afficher les propriétés du cadre de gauche en cliquant à l'intérieur de celui-ci tout en maintenant la touche "alt" enfoncée

Paramètrer le de manière suivante ((Nom="menu"), affichage="menu.htm"):

Figure 36. 

Répeter l'opération pour le cadre de droite (Nom="contenu", affichage="page01.htm")

<frameset cols="150,*" rows="*"> 
  <frame src="menu.htm" name="menu" scrolling="AUTO" noresize>
  <frame src="page01.htm" name="contenu">
</frameset>

Créer une page nouvelle page nommée "page09.htm".

Créer 6 titres de différents niveaux : de h1 => h6.

Insérer une liste simple et une liste numérotée.

Créer un paragraphe.

Copier le repertoire "style" situé dans le repertoire modele et collé le dans votre repertoire

Sélectionner la boîte de dialogue style et cliquer sur "éditer"

Figure 37. boîte de dialogue style

Choisir "lien"

Figure 38. Edition

Sélectionner la feuille de style "/style/exemple.css" en cliquant sur "parcourir"

Figure 39. Lier la feuille de style

Créer une nouvelle page nommée "page10.htm" puis enregistrez la.

Dans la fenêtre objet, sélectionner l'onglet formulaire et commander l'insertion d'un formulaire.

Figure 40. Insertion d'un formulaire

Un rectangle en pointillé rouge délimitant la zone du formulaire apparaît. c'est dans ce dernier que nous allons insérer des objets (champs de texte, boutons ...)

Il faut ensuite définir les propriétés de ce formulaire. Pour cela, sélectionner le rectangle rouge et servez vous de l'inspecteur des propriétés pour régler les paramètres comme indiqué ci dessous :

1 - la méthode = post
2 - Le fichier de destination = laisser ce champ vide pour l'instant
3 - Le nom du formulaire = jo

Figure 41. méthode "post"

Placer vous à l'intérieur du rectangle rouge et insérer un premier champ de texte à l'aide de la boîte objet.

Sélectionner cet objet et paramètrer le de la manière suivante :

1 - Champ de texte = Nom 
2 - Valeur initiale = Nom
3 - Largeur de caractère = 30
4 - Nbre caract. max. = 30
5 - Type = Ligne simple 

Figure 42. Paramètre du champ de texte

En regard du champ de texte créé, Inscriver "Nom" pour indentifier le champ (côté utilisateur)

De la même manière créer 3 autres champs : Prenom, Discipline, Email en sautant une ligne entre chaque champ (n'oubliez pas de les paramètrer correctement)

Insérer un bouton radio et paramètrez le comme cela :

1 - Bouton radio = Frequence
2 - Valeur initiale = 1
3 - Etat initial = désactivé

Figure 43. Paramètre du bouton radio

En regard de ce bouton radio, Inscriver "toutes les années" pour indentifier le champ (côté utilisateur)

De manière identique insérer 2 autres boutons radio nommés "Fréquence" en changeant simplement la valeur de ceux-ci

- Pour le bouton  "Tous les 2 ans" donner la valeur "2" au bouton
- Pour le bouton  "Tous les 4 ans" donner la valeur "4" au bouton

Insérer une case à cocher et paramètrez la comme suit :

1 - Case à cocher = Ville_1
2 - Valeur initiale = Moscou
3 - Etat initial = Désactivée

Figure 44. Paramètre du bouton radio

En regard de cette case à cocher, Inscriver "Moscou" pour indentifier le champ (côté utilisateur)

De manière identique insérer 5 autres cases à cocher nommées :

Nom = Ville_2 ; valeur = Paris (en regard => Paris)
Nom = Ville_3 ; valeur = Athènes (en regard => Athènes)
Nom = Pays_1 ; valeur = Grèce (en regard => Grèce)
Nom = Pays_2 ; valeur = Grèce (en regard => Italie)
Nom = Pays_3 ; valeur = Grèce (en regard => France)

Insérer un champ de texte multiligne nommé "Resume" avec pour valeur initiale "Insérer votre résumé ici". Spécifier une largeur de caractère égale à 50 et un nombre de ligne égal à 5. Pour spécifier un nombre de caractères maximum, éditer le code html de la page et insérer l'attribut "maxlength" à la balise "textarea" comme indiqué ci-dessous (600 caractères maximum)

<textarea name="Resume" rows="5" cols="50" wrap="PHYSICAL" maxlength="600">

Soigner la mise en forme en vous aidant du formulaire modèle