docSynthèse DHTML Définition du DHTML Exemple Version
download 
Plainte Transcription
Synthèse DHTML Définition du DHTML Exemple Version
Modification dynamique de
styles
Permet de visualiser des animations
et intelligence sur le poste client.
Exemples : RollOver de 2 images.
Validation de formulaire.
Mouvement de calques.
Puzzle
Menu dynamique.
InfoBulle
Etc …
Synthèse DHTML
COURS WEB CPI 1A 2002-2003
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
1
27/12/02
Fonctionnalités principales
du DHTML
Modification dynamique du contenu et des
styles.
Positionnement et déplacement d’éléments.
Rafraîchissement du contenu d ’une page sans
interaction avec le serveur.
Génération dynamique de code HTML
Vérification de formulaire.
Interaction avec l’utilisateur grâce à la gestion
d ’événements.
Utilisation de filtre graphique. (exp ouverture
progressive)
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
4
<html>
<head>
<title>Exemple de code </title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="TERMINATOR">
<meta name="Generator" content="WebExpert
2000">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Résumé </h1>
<p>Ceci est la troisième partie du
<em>Seigneur des anneaux</em></p>
<p>La première partie, <em>La fraternité de
l'anneau</em> , racontait ....</p>
</body>
</html>
Avantages du DHTML
•
•
•
•
•
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
CPI 1A Cours WEB
Philippe Bancquart
– HTML
– CSS (cascading Style Sheet,
feuille de style)
– DOM(Document Object Model)
– Langage script coté client
(javascript)
27/12/02
7
5
Exemple changement de logo,
modification de la charte.
CPI 1A Cours WEB
Philippe Bancquart
3
Problèmes d ’interprétation entre les
navigateurs.
Evolution des fonctionnalités à chaque
nouvelle version des navigateurs.
Code différent en fonction des produits
et des versions.
Pas d ’animation vectorielles,
graphisme limité.
Structuration : <h1>, <p>
sémantique : <param>,
Style : <strong>, <font>
C ’est principalement les balises de
styles que nous allons mettre dans
un fichier .CSS, pour faciliter la
maintenance.
– Ceci permet pour la mise à
jour, d'un site de ne modifier
que la feuille de style et
l'ensemble du style se met à
jour.
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
Inconvénients du DHTML
Technologie légères (format texte
Ascii)
Chargement et exécution rapide.
Incluses dans le navigateur.
Pas d ’installation du plug ’in ou
ActiveX coté client.
Technologies standardisées par
W3C
•
27/12/02
2
• Concept permettant de
rendre les pages WEB plus
dynamique et interactives.
• Intégration de plusieurs
technologies.
27/12/02
Description et définition du
HTML
3 types de balises
:
Exemple
•
CPI 1A Cours WEB
Philippe Bancquart
Définition du DHTML
8
CPI 1A Cours WEB
Philippe Bancquart
6
Version
Actuellement version 4.x (1998)
Nous allons vers une xmlisation du
langage
Passage par une DTD référencée
dans le document.
<!Doctype html PUBLIC"//W3C//DTD XHTML
1.0 Stric//EN" "DTD/xhtml1-strict.dtd">
Exemple de la dernière version.
<IMG SRC="image.gif"> ----> <img
src="image.gif"/>
Rem : codage en minuscule et balise fermée.
Emboîtement de balises correctes
Mettre toujours les attributs entre des ""
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
9
1
Avantages du
langage CSS
Problèmes de mise en
page
Outils DHTML
Mélange de balises de stucturation et
de style
Manque de lisibilité.
Taille importante par les balises.
Manque d'homogénéité du style dans
les différentes pages.
Maintenance complexe.
Editeurs HTML :
Bloc-note , ultraEdit, WebExpert.
Ateliers
Dreamweaver, Frontpage, Golive
Pour la position d'éléments.
Utilisation de tableaux imbriqués.
Utilisation d'images transparentes et
graphiques.
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
10
27/12/02
Javascript
Langage de script orienté objet
Permet de développer des petites
applications internet client / serveur
Autorise une interactivité accrue
des pages web
Code javascript dans la page HTML
exécuté:
au chargement de la page
suite à une action (clic sur un
bouton, sélection d'un menu, saisie
de texte, etc...)
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
13
CPI 1A Cours WEB
Philippe Bancquart
Affichage de l'heure
Défilement des textes
horizontalement
Rafraîchir plusieurs frames
Gérer les erreurs de saisie
dans les formulaires
Gérer des menus déroulants
Gérer le remplacement
d'images
(passage de la souris =>
image se modifie)
• Entouré des balises
<SCRIPT
LANGUAGE="Javascript">
et </SCRIPT>
• Placé entre les balises
<HEAD> et </HEAD>
ou à l'intérieur du corps du
fichier HTML
• Déclancheur d'événements
Onload(), OnClick(), OnBlur(),
OnMouseOver()…
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
14
<A HREF=“ “
onMouseOver="alert('Votre
Message');
return true;"> Passez la souris ici</A>
• <HTML>
<HEAD>
<TITLE>Javascript</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!-- on cache pour les vieux
navigateurs
function loadalert ()
{alert("Votre Message")
}
// -- fin -->
</SCRIPT>
<BODY onLoad="loadalert()">
</BODY>
</HTML>
27/12/02
27/12/02
16
CPI 1A Cours WEB
Philippe Bancquart
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
12
15
Ouverture d'un lien dans
une nouvelle fenê
fenêtre
Au chargement
Le passage de la souris sur le
lien activera une boite de
dialogue
Passez la souris ici
CPI 1A Cours WEB
Philippe Bancquart
Mécanique du script
27/12/02
Exemples de javascript
Boite de dialogue par
passage sur un lien
CPI 1A Cours WEB
Philippe Bancquart
11
• réduction de la taille et du temps
de chargement des pages.
• Code plus simple.
• Plusieurs pages se partagent la
même feuille de style.
• Diminution besoin graphique
• Maintenance et adaptation
facilitée.
• Séparation du travail de
rédaction et de mise en page.
• Possible de mettre plusieurs
feuilles de styles en cascade
<FORM>
<INPUT TYPE="button"
VALUE="Titre du Lien"
ONCLICK="window.open('votr
e lien ici ex: http://localhost,
‘Exemple', 'toolbar=yes,
location=yes, directories=yes,
status=yes, menubar=yes,
scrollbars=yes, resizable=yes,
copyhistory=yes, width=600,
height=400')">
</FORM>
17
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
18
2
Boutons Pré
Précédent Suivant
Boutons avec messages
Bouton Actualiser
Identique à celui disponible dans
la barre d'outils de votre
navigateur
<FORM>
<INPUT TYPE="button"
VALUE="Actualiser"
onClick='parent.location="ja
vascript:location.reload()"'>
</FORM>
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
19
Boutons avec messages
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
20
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
21
Changement de couleurs
<FORM>
<SELECT Size="20" name="clr"
onChange="document.bgColor=this.options[thi
s.selectedIndex].value">
<OPTION VALUE="white" SELECTED> blanc
<OPTION VALUE="blue">bleu
<OPTION VALUE="aquamarine">bleu-vert
<OPTION VALUE="chocolate">chocolat
<OPTION VALUE="darkred">rouge foncé
<OPTION VALUE="gold">doré
<OPTION VALUE="red">rouge
<OPTION VALUE="yellow">jaune
<OPTION VALUE="hotpink">rose
<OPTION VALUE="lime">citron vert
<OPTION VALUE="darkkhaki">kaki foncé
<OPTION VALUE="cadetblue">bleu cadet
<OPTION VALUE="darkgoldenrod">doré
foncé
<OPTION VALUE="darkslateblue">bleu foncé
<OPTION VALUE="deeppink">rose profond
<OPTION VALUE="tan">tanné
<OPTION VALUE="wheat">blé
<OPTION VALUE="tomato">tomate
<OPTION VALUE="springgreen">vert
<OPTION VALUE="turquoise">turquoise
</SELECT>
</FORM>
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
22
27/12/02
CPI 1A Cours WEB
Philippe Bancquart
23
3
