Donnez vie à votre page Web

Auteur：Eve Cole Date de mise à jour：2009-06-20 17:01:07

La nouvelle spécification HTML 4.0 définie par l'organisation W3C ( www.w3c.org ) apporte des outils plus puissants à chaque concepteur Web. Il s'agit d'un changement qui affecte tous les développeurs et concepteurs Web auxquels beaucoup ont pensé dans le passé. inimaginable peut désormais être facilement réalisé avec l'aide de DHTML et CSS. Voici une description détaillée de la mise en œuvre de certains effets lors du processus de compilation de la page Web.

* Technologie des menus

Si les personnes ayant visité les sites Microsoft et Macromedia font attention, elles remarqueront certainement la technologie des menus. Cliquez pour afficher un sous-menu, puis cliquez à nouveau pour masquer le sous-menu. C'est très intéressant et pratique. L'auteur a téléchargé ces deux pages respectivement. Après avoir analysé le code source, j'ai découvert qu'elles n'utilisaient pas la même méthode, et les deux méthodes ont leurs propres avantages et inconvénients.

Macromedia utilise la technologie multipage. Il s'agit d'abord de créer une page de menu principal sans éléments développés, puis de créer une page pour chaque élément de menu principal développé. Combien de sous-pages sont nécessaires pour correspondre au nombre d'éléments dans le menu principal. Donnons un exemple simple pour illustrer :

<html>

<head>

<title>Un exemple de menu</title>

</head>

<a href="menu_2.htm#abc"><b>Cliquez ici !</b></a>

</body>

</html >

<html>

<head>

<title>Un exemple de menu</title>

</head>

<b>Cliquez ici !</b></a > </p>

liste 1

liste 2

liste 3

</body>

</html>

Cliquez sur Cliquez ici ! dans la figure 1 et l'effet de la figure 2 apparaîtra. Lors de la mise en œuvre spécifique, vous devez faire attention à la définition et à l'utilisation de la balise <a name=" ">, et réaliser une correspondance biunivoque, sinon ce sera chaotique. De plus, lorsqu'il y a de nombreux éléments de menu, n'oubliez pas que seul le sous-menu actuellement répertorié est défini avec <a name=" "> et que les autres éléments du menu principal doivent être liés à leurs pages développées correspondantes.

Cette méthode est très simple à mettre en œuvre, peut être maîtrisée rapidement par les gens ordinaires et peut être prise en charge par n'importe quel navigateur, mais ses inconvénients sont également évidents. Tout d'abord, c'est lent. L'appel de chaque page entraînera inévitablement une longue attente. Ce n'est que lorsque la page est pleine de texte que vous vous sentirez stagnant. Deuxièmement, c'est difficile à compiler. , c'est un peu compliqué de produire un par un. Cette technologie présente donc encore certaines limites.

Microsoft utilise la technologie DHTML. DHTML est une technologie relativement nouvelle, donc pour certains "anciens" navigateurs, cette méthode d'implémentation de menu est inutile.

Donnons un exemple pour illustrer.

Comme le montre la figure 3, cliquez sur Produits et services et le menu suivant apparaîtra immédiatement. Cliquez à nouveau et il disparaîtra. C'est le même que Macromedia, mais la différence est qu'il semble être beaucoup plus rapide. .

<html>

<head>

<title>Bienvenue sur la page d'accueil de Microsoft</title>

.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -left : 14;}

.NV2 {position:relative;font-size:.9em;font-weight:normal;}

</style>

</tête>

<corps>

function clikker(a,b) {

if (a.style.display ==') {

a.style.display = 'none';

b.src='usm.gif'

}

else {

a.style.display='; ;

b.src='dsmh.gif';

}

</script>

Produits et services

<div CLASS="NV2" ID="BB1" STYLE ="display:';"

onclick="window.event.cancelBubble = true;">

<a HREF="/products/"><p>Catalogue de produits</a>

<a HREF=" http://support.microsoft.com/support/">Support technique </a>

<a HREF="/events/">Événements et séminaires</a>

<a HREF="/train_cert/">Formation et certification</a>

<a HREF="/referral/sr_default.asp">Références vers des tiers</a> </p>

</div>

</dd>

</div>

</body>

</html>

Dans le code source, .NV1 et .NV2 sont des définitions de police CSS, et la fonction clikker contrôle l'affichage et le masquage des éléments de menu. La variable a contrôle le texte et la variable b contrôle les images (non affichées dans l'image en raison d'un téléchargement incomplet). Dans l'application réelle, veuillez faire attention à la portée définie par le div et ne masquez pas les autres éléments du menu principal lorsque vous cliquez.

La méthode de mise en œuvre de Microsoft est relativement intelligente, rapide, relativement simple à créer et ne nécessite qu'une seule page. L'inconvénient est qu'il nécessite au moins la prise en charge d'IE 4.0 ou NN 4.0 ou supérieur.

Les deux méthodes ont leurs propres avantages et inconvénients. Celle que vous choisissez dépend de la nature de votre page d’accueil et de la prise en charge de votre navigateur.

* Changement de couleur du texte

C'est la technologie la plus répandue sur le Web. Lorsque votre souris passe sur un élément, celui-ci change immédiatement de couleur et émet parfois un son, à la manière d'un logiciel pédagogique multimédia. Si vous mélangez bien vos couleurs, la page sera très agréable à regarder.

Il existe de nombreuses façons de modifier la couleur du texte. Nous n’en présentons ici que brièvement deux.

La première méthode consiste simplement à utiliser la technologie CSS. Actuellement, seul IE 4.0 prend en charge cette technologie. Son exemple de code est le suivant.

<html>

<head>

<title>Une étude de la dynamique des populations</title>

BODY { background: white; }

A:link { color: red }

A:visited { color: marron }

A: active { couleur : fuchsia }

A : survoler {couleur : bleu}

</style>

</head>

<body>

Ceci est l'exemple le plus simple d'utilisation de la technologie CSS pour contrôler la couleur du texte.</a></p>

</body>

</html>

Dans cet exemple, le texte du lien est initialement affiché en rouge, devient bleu lorsque la souris passe sur le texte, passe au magenta lorsque vous cliquez pour y accéder et devient marron après l'accès. Étant donné que Netscape ne prend pas encore en charge les attributs CSS tels que lien, visité et survol, vous ne pourrez pas voir ces effets si vous utilisez Communicator.

La deuxième méthode consiste à utiliser JavaScript pour écrire un petit programme de script à exécuter, afin d'atteindre l'objectif de changement de couleur. Son exemple de code est le suivant.

<html>

<head>

<title>Changer la couleur du texte</title>

<!--

.css1 { famille de polices : "Courier New", Courier, mono ; style de police : normal ; hauteur de police ; poids : gras ; couleur : bleu}

-->

</style>

function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {

var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE

if ((theObj != null) && (theProp.indexOf("style.") != 0 &&

theObj.style != null))

eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');

}

</script>

</head>

<span class="css1" ID="x"

onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">

Changez la couleur du texte.</span>

</body>

</html>

Étant donné qu'IE 4.0 et NN 4.0 ont des mécanismes de contrôle différents pour les objets, vous devez d'abord vérifier le navigateur, puis faire l'adresse correspondante. La fonction MM_changeProp() implémente cette méthode de changement de couleur du texte. Cette méthode nécessite de définir l'ID avec span et d'ajouter onmouseover et onmouseout partout où il doit être modifié, ce qui est beaucoup plus gênant que la première méthode. Par conséquent, si vous n’avez pas d’opinion bien arrêtée contre Microsoft, il est préférable d’utiliser la première méthode.

* Boutons dynamiques

Les boutons dynamiques ici ne sont ni des animations .gif ni les différents boutons d'effets spéciaux fournis dans FrontPage. Je pense que vous avez dû rencontrer cette situation : lorsque votre souris se déplace sur un certain bouton, elle bouge soudainement, semblant vous inciter à cliquer dessus. C'est intéressant, n'est-ce pas ? Implémentons-le ci-dessous.

Tout d'abord, vous devez préparer deux images. Puisqu'il s'agit de boutons, il n'est pas nécessaire qu'elles soient très grandes et que les couleurs ne soient pas trop sophistiquées. Un simple .gif fera l'affaire. deux images afin qu'elles ne soient pas visibles après le déplacement. Ci-dessous, deux photos que j'ai faites.

Voyons ensuite comment les effets dynamiques sont obtenus. Son code source est le suivant.

<html>

<head>

<title>Boutons poussoirs</title>

</head>

<!--

versionButton = 1

browserName = navigator.appName

browserVer = parseInt(navigator.appVersion; );

if ( browserVer >= 3)

versionButton = "3";

if (versionButton == "3")

{

toc1on = new Image(42, 197);

toc1on.src

"on.home.gif";

Image(42, 197);

toc1off.src = "home.gif"

}

function img_act(imgName)

{

if (versionButton == "3")

{

imgOn = eval(imgName + "on.src");

document [imgName].src = imgOn

}

function img_inact(imgName)

{

if (versionButton == "3")

{

imgOff = eval(imgName + "off.src");

document [imgName].src = imgOff

}

// -->

</script>

< a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')"><img src=home.gif

width=100 height=50 border=0 nom ="toc1"></a>

</body>

</html>

Il y a deux choses à noter :

1. Assurez-vous d'attribuer un nom à img, puis appliquez ce nom à la définition de l'image source.

2. Faites attention aux différents symboles dans le fichier source, en particulier les guillemets, et faites également attention au chemin du fichier image source. Il est préférable d'utiliser un chemin relatif pour éviter que le site ne s'affiche pas correctement après le téléchargement. Bien entendu, cette méthode d'échange d'images nécessite également la prise en charge d'un navigateur version 4.0 ou supérieure. Si vous utilisez toujours un navigateur version 3.0, mettez à niveau dès que possible !

* Si vous y êtes invité,

placez la souris sur une image et les informations d'invite apparaîtront, tout comme les boutons de nombreux logiciels qui donnent des invites de fonction. Cette fonction est facile à implémenter dans l’édition de pages Web. Jetons un coup d’œil à son effet.

Il est facile d'obtenir cet effet, il suffit de regarder le code source.

......

<tr>

<td WIDTH="57"><a HREF="who.html" TARGET="main"

ONMOUSEOVER="img_act('who')"

ONMOUSEOUT="img_inact('who') "><img

SRC="../images/button_who0.gif" NAME="who"

title="Profil personnel de Zhou Huajian" ALT="Qui suis-je"

BORDER="0" WIDTH="113" HEIGHT="45 "></a>

</a></td>

< /tr>

...

la partie soulignée du code indique comment procéder. L’attribut Title est très utile ! Il peut être utilisé dans tous les éléments sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE et TITLE pour définir les informations d'invite lorsque la souris passe dessus.

Ci-dessus, nous avons discuté en détail de quelques conseils relatifs au processus de compilation de pages Web. Il existe de nombreuses pages magnifiquement conçues et technologiquement avancées sur le Web, et l'analyse de leur code source est un bon moyen d'apprendre. La technologie informatique évolue constamment. Face à ces nouvelles technologies qui se succèdent : DHTML, CSS, XML... nous ne pouvons qu'affronter les difficultés, les maîtriser, et les appliquer à nos pages web pour rendre nos pages web plus actives.

(Bureau du tourisme de Tianjin Jixian 301900 Jia Hejing)