Erwecken Sie Ihre Webseite zum Leben

Autor：Eve Cole Aktualisierungszeit：2009-06-20 17:01:07

Die neue HTML 4.0-Spezifikation, die von der W3C-Organisation ( www.w3c.org ) definiert wurde, bietet jedem Webdesigner leistungsfähigere Tools. Dies ist eine Änderung, die alle Webentwickler und Designer betrifft, über die viele in der Vergangenheit nachgedacht haben Mit Hilfe von DHTML und CSS lässt sich nun unvorstellbares erreichen. Hier finden Sie eine detaillierte Beschreibung der Implementierung einiger Effekte während des Webseiten-Kompilierungsprozesses. Ich hoffe, Sie können damit Ihre Webseite beleben.

* Menütechnologie

Wenn Leute, die Microsoft- und Macromedia-Websites besucht haben, auf jeden Fall die Menütechnologie bemerken, klicken Sie, um ein Untermenü anzuzeigen, und klicken Sie erneut, um das Untermenü auszublenden. Sie ist sehr interessant und praktisch. Der Autor hat diese beiden Seiten heruntergeladen. Nach der Analyse des Quellcodes stellte ich fest, dass sie nicht dieselbe Methode verwendeten und beide Methoden ihre eigenen Vor- und Nachteile haben.

Macromedia nutzt die Multipage-Technologie. Das heißt, zuerst eine Hauptmenüseite ohne erweiterte Elemente zu erstellen und dann eine Seite für jedes erweiterte Hauptmenüelement zu erstellen. Wie viele Unterseiten sind erforderlich, um der Anzahl der Elemente im Hauptmenü zu entsprechen? Lassen Sie uns zur Veranschaulichung ein einfaches Beispiel geben:

<html>

<head>

<title>Ein Menübeispiel</title>

</head>

<a href="menu_2.htm#abc"><b>Klicken Sie hier!</b></a>

</body>

</html >

<html>

<head>

<title>Ein Menübeispiel</title>

</head>

<b>Klicken Sie hier!</b></a > </p>

Liste 1

Liste 2

Liste 3

</body>

</html>

Klicken Sie auf „Klicken Sie hier!“ in Abbildung 1 und der Effekt von Abbildung 2 wird angezeigt. Bei der spezifischen Implementierung müssen Sie auf die Definition und Verwendung des Tags <a name=" "> achten und eine Eins-zu-Eins-Entsprechung erreichen, da es sonst chaotisch wird. Wenn es viele Menüelemente gibt, denken Sie außerdem daran, dass nur das aktuell aufgelistete Untermenü mit <a name=" "> definiert wird und andere Hauptmenüelemente mit den entsprechenden erweiterten Seiten verknüpft werden sollten.

Diese Methode ist sehr einfach zu implementieren, kann von normalen Menschen schnell erlernt werden und kann von jedem Browser unterstützt werden, aber auch ihre Mängel liegen auf der Hand. Erstens ist es langsam, jede Seite aufzurufen. Nur wenn die Seite voller Text ist, ist die Kompilierung schwierig Es ist etwas mühsam, es einzeln zu produzieren. Daher weist diese Technologie noch gewisse Einschränkungen auf.

Microsoft verwendet die DHTML-Technologie. DHTML ist eine relativ neue Technologie, daher ist diese Menüimplementierungsmethode für einige „alte“ Browser nutzlos.

Lassen Sie uns zur Veranschaulichung ein Beispiel geben.

Wie in Abbildung 3 gezeigt, wird das folgende Menü angezeigt. Klicken Sie erneut und es verschwindet. Es ist das gleiche wie bei Macromedia, der Unterschied besteht jedoch darin, dass der Quellcode wie folgt aussieht .

<html>

<head>

<title>Willkommen auf der Homepage von 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>

</head>

<body>

function clikker(a,b) {

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

a.style.display

'none

;

b.src='dsmh.gif';

}

</script>

Produkte & Dienstleistungen

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

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

<a HREF="/products/"><p>Produktkatalog</a>

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

<a HREF="/events/">Veranstaltungen und Seminare</a>

<a HREF="/train_cert/">Schulung und Zertifizierung</a>

<a HREF="/referral/sr_default.asp">Verweise an Dritte</a> </p>

</div>

</dd>

</div>

</body>

</html>

Im Quellcode sind .NV1 und .NV2 CSS-Schriftartdefinitionen, und die Clikker-Funktion steuert die Anzeige und das Ausblenden von Menüelementen. Variable a steuert Text und Variable b steuert Bilder (im Bild aufgrund unvollständigen Downloads nicht angezeigt). Achten Sie in der tatsächlichen Anwendung bitte auf den durch das Div definierten Bereich und blenden Sie beim Klicken keine anderen Hauptmenüelemente aus.

Die Implementierungsmethode von Microsoft ist relativ clever, schnell, relativ einfach zu erstellen und erfordert nur eine Seite. Der Nachteil besteht darin, dass mindestens die Unterstützung von IE 4.0 oder NN 4.0 oder höher erforderlich ist.

Beide Methoden haben ihre eigenen Vor- und Nachteile. Welche Sie wählen, hängt von der Art Ihrer Homepage und der Browserunterstützung ab.

* Ändern der Textfarbe

Dies ist die am weitesten verbreitete Technologie im Web. Wenn Sie mit der Maus über ein Element fahren, ändert das Element sofort seine Farbe und gibt manchmal einen Ton von sich, genau wie bei Multimedia-Lernsoftware. Wenn Sie die Farben gut mischen, wird die Seite sehr ansprechend für das Auge sein.

Es gibt viele Möglichkeiten, die Textfarbe zu ändern. Hier stellen wir nur zwei davon kurz vor.

Die erste Methode besteht darin, einfach die CSS-Technologie zu verwenden. Derzeit unterstützt nur IE 4.0 diese Technologie. Der Beispielcode lautet wie folgt.

<html>

<head>

<title>Eine Studie zur Bevölkerungsdynamik</title>

BODY { Hintergrund: weiß }

A:link { Farbe: rot }

A:visited { Farbe: kastanienbraun }

A: active { color: fuchsia }

A:hover {color:blue}

</style>

</head>

<body>

Dies ist das einfachste Beispiel für die Verwendung von CSS-Technologie zur Steuerung der Textfarbe.</a></p>

</body>

</html>

In diesem Beispiel wird der Linktext zunächst in Rot angezeigt, wechselt zu Blau, wenn die Maus über den Text bewegt wird, ändert sich zu Magenta, wenn zum Aufrufen darauf geklickt wird, und wird nach dem Zugriff zu Kastanienbraun. Da Netscape noch keine CSS-Attribute wie Link, Visited und Hover unterstützt, können Sie diese Effekte nicht sehen, wenn Sie Communicator verwenden.

Die zweite Methode besteht darin, mithilfe von JavaScript ein kleines Skriptprogramm zu schreiben, das ausgeführt werden soll, um den Zweck der Farbänderung zu erreichen. Der Beispielcode lautet wie folgt.

<html>

<head>

<title>Textfarbe ändern</title>

<!--

.css1 { Schriftfamilie: „Courier New“, mono; Schriftgröße: normal; Gewicht: fett; Farbe: blau}

-->

</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')">

Ändern Sie die Textfarbe.</span>

</body>

</html>

Da IE 4.0 und NN 4.0 unterschiedliche Kontrollmechanismen für Objekte haben, müssen Sie zuerst den Browser überprüfen und dann vornehmen den entsprechenden Deal mit. Die Funktion MM_changeProp() implementiert diese Methode zum Ändern der Textfarbe. Diese Methode erfordert die Definition der ID mit span und das Hinzufügen von onmouseover und onmouseout an allen Stellen, an denen sie geändert werden soll, was viel aufwändiger ist als die erste Methode. Wenn Sie keine starke Meinung gegen Microsoft haben, ist es daher besser, die erste Methode zu verwenden.

* Dynamische Schaltflächen

Die dynamischen Schaltflächen hier sind weder GIF-Animationen noch die verschiedenen Spezialeffektschaltflächen, die in FrontPage bereitgestellt werden. Ich glaube, Sie kennen diese Situation: Wenn Sie mit der Maus über eine bestimmte Schaltfläche fahren, bewegt sie sich plötzlich und scheint Sie dazu zu verleiten, darauf zu klicken. Das ist doch interessant, nicht wahr? Lassen Sie es uns unten implementieren.

Zunächst sollten Sie zwei Bilder vorbereiten. Da es sich um Schaltflächen handelt, müssen diese nicht sehr groß und die Farben nicht zu ausgefallen sein. Es sollten einige Unterschiede zwischen ihnen vorhanden sein zwei Bilder, damit sie nach dem Verschieben nicht sichtbar sind. Unten sind zwei Bilder, die ich gemacht habe.

Schauen wir uns als nächstes an, wie dynamische Effekte erzielt werden. Der Quellcode lautet wie folgt.

<html>

<head>

<title>Push-In Buttons</title>

</head>

<!--

versionButton = 1

browserName = navigator.appName;

browserVer = parseInt(navigator.appVersion );

if ( browserVer >= 3)

versionButton = "3";

if (versionButton == "3")

{

toc1on

new Image(42, 197)

;

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

;

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

onMouseover = "img_act('toc1')"

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

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

</body>

</html>

Es gibt zwei Dinge, die beachtet werden sollten:

1. Stellen Sie sicher, dass Sie img einen Namen zuweisen und diesen Namen dann auf die Quellbilddefinition anwenden.

2. Achten Sie auf verschiedene Symbole in der Quelldatei, insbesondere auf Anführungszeichen, und achten Sie auch auf den Pfad der Quellbilddatei. Verwenden Sie am besten einen relativen Pfad, um zu verhindern, dass die Site nach dem Hochladen nicht richtig angezeigt wird. Selbstverständlich ist auch für diese Art des Bildaustauschs die Unterstützung eines Browsers ab Version 4.0 erforderlich. Wenn Sie noch einen Browser ab Version 3.0 verwenden, aktualisieren Sie so schnell wie möglich!

* Wenn Sie dazu aufgefordert werden,

bewegen Sie die Maus auf ein Bild und die Eingabeaufforderungsinformationen werden angezeigt, genau wie die Schaltflächen vieler Softwareprogramme, die Funktionsaufforderungen geben. Diese Funktion lässt sich leicht in die Webseitenbearbeitung integrieren. Schauen wir uns ihre Wirkung an.

Es ist einfach, diesen Effekt zu erzielen. Schauen Sie sich einfach den Quellcode an.

......

<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="Zhou Huajians persönliches Profil" ALT="Wer bin ich"

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

</a></td>

< /tr>

...

der unterstrichene Teil des Codes zeigt, wie es geht. Das Title-Attribut ist sehr nützlich! Es kann in allen Elementen außer BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE und TITLE verwendet werden, um Eingabeaufforderungsinformationen zu definieren, wenn die Maus darüber fährt.

Oben haben wir einige Tipps zum Kompilieren von Webseiten ausführlich besprochen. Es gibt viele schön gestaltete und technologisch fortschrittliche Seiten im Web, und die Analyse ihres Quellcodes ist eine gute Möglichkeit, dies zu lernen. Die Computertechnologie entwickelt sich ständig weiter. Angesichts dieser neuen Technologien, die nacheinander auftauchen: DHTML, CSS, XML ... können wir uns nur den Schwierigkeiten stellen, sie meistern und sie auf unsere Webseiten anwenden, um unsere Webseiten aktiver zu machen.

(Tianjin Jixian Tourism Bureau 301900 Jia Hejing)