W3C 組織 ( www.w3c.org ) によって定義された新しい HTML 4.0 仕様は、すべての Web デザイナーに、より強力なツールを提供します。これは、これまで多くの人が考えてきた、すべての Web 開発者とデザイナーに影響を与える変更です。 DHTML と CSS の助けを借りて、想像を絶するものを簡単に実現できるようになりました。ここでは、Web ページのコンパイル プロセス中のいくつかの効果の実装について詳しく説明します。これを使用して、Web ページを活性化できることを願っています。
* メニュー技術
Microsoft や Macromedia のサイトにアクセスしたことがある人は、クリックするとサブメニューが表示され、もう一度クリックするとサブメニューが非表示になるというメニュー技術に気づくでしょう。著者はこれら 2 つのページをそれぞれダウンロードして、ソース コードを分析した結果、これらは同じ方法を使用していないことがわかりました。両方の方法にはそれぞれ長所と短所があります。実装方法を見てみましょう。
Macromedia はマルチページ技術を使用しています。つまり、最初に展開された項目のないメイン メニュー ページを作成し、次に展開されたメイン メニュー項目ごとに、メイン メニューの項目数に対応するサブページの数を作成します。説明するために簡単な例を挙げてみましょう。
<html>
<head>
<title>メニューの例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF ">
<a name="abc"></a><p>
<a href="menu_2.htm#abc"><b>ここをクリックしてください。</b></a>
</body>
</html >
<html>
<head>
<title>メニューの例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="# FFFFFF">
<p><a name="abc"></a></p>
<p><a href="menu_1.htm#abc">
<b>ここをクリックしてください!</b></a > </p>
リスト 1
リスト2
リスト3
</body>
</html>
図 1 の「Click here!」をクリックすると、図 2 の効果が表示されます。具体的な実装では、タグ <a name=" "> の定義と使用法に注意し、1 対 1 の対応を達成する必要があります。そうしないと、混乱が生じます。さらに、メニュー項目が多数ある場合は、現在リストされているサブメニューのみが <a name=" "> で定義され、他のメイン メニュー項目は対応する展開されたページにリンクされる必要があることに注意してください。
この方法は実装が非常に簡単で、一般の人でもすぐに習得でき、どのブラウザでもサポートできますが、欠点も明らかです。まず、各ページの呼び出しが遅いため、ページがテキストでいっぱいの場合に限り、待ち時間が長くなります。次に、テクノロジは単純ですが、コンパイルが困難です。 、いちいち制作するのはちょっと面倒です。したがって、このテクノロジーには依然として一定の制限があります。
Microsoft は DHTML テクノロジを使用しています。 DHTML は比較的新しいテクノロジであるため、一部の「古い」ブラウザでは、このメニュー実装方法は役に立ちません。
例を挙げて説明しましょう。
図 3 に示すように、[製品とサービス] をクリックすると、すぐに次のメニューが表示されます。もう一度クリックすると、メニューが表示されなくなります。ただし、違いは、ソース コードが次のとおりであることです。 。
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Microsoft のホームページへようこそ</title>
<style TYPE="text/css">
.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>
<script TYPE="text/javascript">
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>
<div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);">
<dd><img ID="BBp " SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11">
製品とサービス
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>製品カタログ</a>
<a HREF=" http://support.microsoft.com/support/">テクニカルサポート</a>
<a HREF="/events/">イベントとセミナー</a>
<a HREF="/train_cert/">トレーニングと認定</a>
<a HREF="/referral/sr_default.asp">サードパーティへの紹介</a> </p>
</div>
</dd>
</div>
</body>
</html>
ソース コードでは、.NV1 と .NV2 は CSS フォント定義であり、クリッカー関数はメニュー項目の表示と非表示を制御します。変数 a はテキストを制御し、変数 b は画像を制御します (ダウンロードが不完全なため、図には示されていません)。実際のアプリケーションでは、div で定義されたスコープに注意し、クリック時に他のメインメニュー項目を隠さないようにしてください。
Microsoft の実装方法は比較的賢く、高速で作成が比較的簡単で、必要なページは 1 ページだけです。欠点は、少なくとも IE 4.0 または NN 4.0 以降のサポートが必要なことです。
どちらの方法にも独自の長所と短所があり、どちらを選択するかは、ホームページとブラウザのサポートの性質によって異なります。
* テキストの色の変更
これは、Web 上で最も一般的なテクノロジーであり、マウスが要素の上に移動すると、要素の色がすぐに変わり、マルチメディア教育ソフトウェアと同様に、場合によっては音も鳴ります。色をうまく混ぜると、ページはとても楽しいものになります。
文字の色を変更するにはさまざまな方法がありますが、ここではそのうちの 2 つだけを簡単に紹介します。
1 つ目の方法は、単純に CSS テクノロジーを使用することです。現在、このテクノロジーをサポートしているのは IE 4.0 だけです。そのサンプルコードは以下の通りです。
<html>
<head>
<title>人口動態の研究</title>
<style type="text/css">
BODY { 背景: 白 }
A:リンク { カラー: 赤 }
A: 訪問済み { カラー: マルーン }
A:アクティブ { color: フクシア }
A:hover {color:blue}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
これは、CSS テクノロジを使用してテキストの色を制御する最も単純な例です。</a></p>
</body>
</html>
この例では、リンク テキストは最初は赤で表示され、マウスをテキスト上に移動すると青に変わり、クリックしてアクセスするとマゼンタに変わり、アクセスすると栗色に変わります。 Netscape はリンク、訪問者、ホバーなどの CSS 属性をまだサポートしていないため、Communicator を使用する場合はこれらの効果を確認できません。
2 番目の方法は、JavaScript を使用して小さなスクリプト プログラムを作成し、実行することで色を変更するという目的を達成します。そのサンプルコードは以下の通りです。
<html>
<head>
<title>テキストの色の変更</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 { font-family: "Courier New", フォントサイズ: 14pt; 行の高さ: 通常;太さ: 太字; 色: 青}
-->
</style>
<script language="JavaScript">
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>
<body bgcolor="#FFFFFF">
<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')">
テキストの色を変更します。</span>
</body>
</html>
IE 4.0 と NN 4.0 ではオブジェクトの制御メカニズムが異なるため、最初にブラウザを確認してから、対応する取引。 MM_changeProp() 関数は、このテキストの色を変更するメソッドを実装します。この方法では、span を使用して ID を定義し、変更する必要があるすべての場所に onmouseover と onmouseout を追加する必要があり、最初の方法よりもはるかに面倒です。したがって、Microsoft に対して強い意見を持っていない場合は、最初の方法を使用することをお勧めします。
* ダイナミック ボタン
ここでのダイナミック ボタンは、.gif アニメーションでも、FrontPage で提供されるさまざまな特殊効果ボタンでもありません。マウスを特定のボタンの上に移動すると、ボタンが突然クリックしたくなるような動きをします。面白いですよね。以下で実装してみましょう。
まず、ボタンなのであまり大きくなくてもよく、派手な色でなくても構いません。多少の違いはあるはずです。移動後に見えなくなるように 2 つの写真を貼り付けます。以下は私が作った2枚の写真です。
次に、動的効果がどのように実現されるかを見てみましょう。そのソースコードは次のとおりです。
<html>
<head>
<title>プッシュイン ボタン</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
ブラウザ名 = navigator.appName
ブラウザVer = parseInt(navigator.appVersion; );
if (ブラウザVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = new Image(42, 197);
toc1on.src=
"on.home.gif";
画像(42, 197);
toc1off.src = "ホーム.gif"
;
function img_act(imgName)
{
if (versionButton
== "3")
{
imgOn = eval(imgName + "on.src");
ドキュメント
[imgName].src = imgOn;
function img_inact(imgName)
{
if (versionButton == "3")
{
imgOff=
eval(
imgName + "off.src");
ドキュメント [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>
注意すべき点が 2 つあります。
1. 必ず img に名前を割り当て、ソース イメージ定義でこの名前を適用してください。
2. ソース ファイル内のさまざまな記号、特に引用符に注意し、ソース画像ファイルのパスにも注意してください。アップロード後にサイトが正しく表示されないように、相対パスを使用することをお勧めします。もちろん、この画像交換方法にはブラウザ バージョン 4.0 以降のサポートも必要です。まだブラウザ バージョン 3.0 を使用している場合は、できるだけ早くアップグレードしてください。
* プロンプトが表示されたら、
画像上にマウスを置くと、機能プロンプトを表示する多くのソフトウェアのボタンと同様に、プロンプト情報が表示されます。この機能はWebページ編集に簡単に実装できますので、その効果を見てみましょう。
この効果はソースコードを見るだけで簡単に実現できます。
......
<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="誰"
title="周華健の個人プロフィール" ALT="私は誰ですか"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" ONMOUSEOUT="img_inact('who')">
</a></td>< /tr>
...
コードの下線部分はその方法です。 Title 属性は非常に便利です。 BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE を除くすべての要素で使用して、マウスがその上を通過したときのプロンプト情報を定義できます。
上記では、Web ページの編集プロセスにおけるいくつかのヒントについて詳しく説明しました。 Web には美しくデザインされ、技術的に進歩したページがたくさんあり、それらのソース コードを分析するのは良い学習方法です。コンピューター技術は常に進歩しています。DHTML、CSS、XML など、次から次へと登場する新しい技術に直面して、私たちは困難に直面し、それらを習得し、それらを Web ページに適用して、Web ページをよりアクティブにするしかありません。
(天津吉県観光局 301900 Jia Hejing)