1 はじめ
に インターネット/イントラネットの継続的な普及と発展に伴い、ますます多くの企業、企業、個人が独自の Web サイトを構築し、Web ページを作成し、人々が閲覧できる新しい方法で情報を外部に公開し始めています。 、読書と応用。そのため、Web ページ制作はますます多くの専門家の注目を集めています。
Web ページとは、個人情報、ビジネス、エンターテイメント、その他のコンテンツを含む、インターネットを通じて世界に情報を提供するいくつかの文書ファイルを指します。 Web ページは、ハイパーテキスト マークアップ言語 (HTML) を使用して作成され、訪問者がブラウザを使用して読むことができるように、インターネット/イントラネット上の Web サーバーに保存されます。 HTML 言語で記述された Web ページはハイパーテキストとも呼ばれます。つまり、Web ページにはテキスト、グラフィックス、サウンド、画像、ハイパーリンク (HyperLink) などのマルチメディア情報が含まれています。
2 DHTML シンプル
HTML やスクリプト言語で書かれた多数の Web ページにブラウザでアクセスできます。ブラウジングを容易にするために、さまざまなコンピューター メーカーが独自のブラウザーを発売していますが、これらのブラウザーには HTML をサポートするための統一された標準がまだ存在せず、これは明らかにインターネットの発展に役立ちません。そのため、World Wide Web Consortium (W3C) は、プラットフォームや言語に依存しない仕様である Document Object Model (DOM) を開発しました。
DOM は、HTML、CSS (カスケード スタイル シート)、およびスクリプト言語を組み合わせて、1 人または複数の人が実装できる相互運用性モデルを形成します。 Netscape と Microsoft は W3C に対して、DOM を実装するための提案を行いました。つまり、問題を解決するには動的 HTML、つまり DHTML (Dynamic HTML) を使用することです。
DHTML は、既存の HTML との互換性を保ちながら拡張されたいくつかの新しい機能の総称です。これらの新機能は主に、動的機能、位置決め機能、および CSS を利用する機能を指します。
DHTML を使用する理由は 2 つあります。まず、DHTML は Web ページ上の各要素を多数の独立したオブジェクトに分割し、これらのオブジェクトのプロパティは CSS を通じて指定します。第 2 に、DHTML は、各オブジェクトをプログラミングおよびスクリプト言語フレームワークに開きます。プログラミング言語 C++ を使用して Web ページ上のオブジェクトを操作できます。また、Java スクリプトおよび VBscript も Web ページ上のオブジェクトを操作するために使用できます。これは、Web ページとその上のすべてがプログラム可能であり、Web ページに新しい機能がもたらされることを意味します。アプリケーションを実行すると違いがわかります。Web 上でプログラムを実行していたときは、Web ページに多数の要素が含まれる場合、毎回 Web ページが再ダウンロードされるまで待つ必要がありました。非表示のオブジェクトの場合は、全画面表示になることもあります。DHTML を使用してサーバーに再度アクセスするプロセスが実行されます。画面の上部にある画像をクリックすると、ページの下部に段落が表示されます。再度サーバーにアクセスすることなく、すぐに画面が切り替わります。すべてのテーブルがライブ データベースになり、ユーザーはデータを動的にフィルタリングして並べ替えることができます。これにより、サーバーへのリクエストの数が減り、サーバーの負荷が軽減され、クライアントとサーバーの全体的なパフォーマンスが向上します。
3 スタイル シート CSS の使用
DHTML の基礎はカスケード スタイル シート (カスケード スタイル シート) です。スタイルとは、Web ページ作成者によって定義された一連の表示および配置属性を指します。 CSS の最大の特徴はオブジェクト指向の Web デザインです。つまり、すべてのページ、すべての段落、すべての画像、表がオブジェクトとして扱われます。次に、そのオブジェクトの各インスタンスを宣言します。各インスタンスにはスタイルがあり、これは属性または表示命令のセットです。これらのプロパティは、一度宣言される限り、Web ページ全体、さらにはサイト全体で使用されます。各スタイルには、H1、Li などの名前を付けることができます。スタイルの名前が有効な DHTML 要素 (またはタグ) の名前と同じである場合、そのスタイルは要素のすべてのインスタンスに自動的に適用されます。対応する DHTML タグなしでスタイル名が付けられている場合は、そのスタイルを表示したい場所に手動で適用する必要があります。
3.1 基本スタイルの定義と使用 次のプログラム セグメントには、H1 とお気に入りの 2 つのスタイルがあります。H1 は有効な DHTML 要素です。プログラム内の
3.2 外部スタイルの使用 スタイルシートは外部ファイルに保存することもできます。このファイルとページ間の接続は、IMPORT または LINK を通じて行うことができます。たとえば、スタイル シートはファイル mysite.css に保存されます。次のコードをドキュメントに挿入して、外部スタイル シートを呼び出すことができます。
〈リンク REL=スタイルシート
HREF=”mysite.css”
TYPE=”テキスト／CSS”
Title=”テストスタイル”〉
4 インタラクティブ機能の実現
CSS 自体にはインタラクティブ機能がありません。インタラクションを実現するには、CSS で定義されたオブジェクトとドキュメントモデル (DOM) を結合し、Web 文書を DHTML 文書に変換する必要があります。 DOM は、スクリプト言語がページ上の要素にアクセスする方法を提供します。Microsoft と Netscape でサポートされるオブジェクト モデルは多少異なります。
Microsoft のモデルでは、スクリプト言語は HTML ページ上のすべての要素にアクセスでき、すべての要素は document.all 内のオブジェクトとして反映されます。次のプログラム スニペットは、ページ内のすべての要素を書き出すために使用されます。
for (I=0;I
document.write(document.all［I］.tagName+”n” );
}
Netscape のモデルでは、スクリプト言語は、
for (I=0;I
document.write(document.layers［I］.name+”n”);
}
5 位置決めテクノロジーの使用
HTML では、オブジェクトの位置は常に Web ページ構造の他の部分と相対的に決まります。Web ページをコンパイルするとき、テキストを追加してページから画像を抽出することがよくあります。 DHTML の位置決め技術を使用して、オブジェクトを固定して積み重ねることができます。つまり、複数の画像をページ上の同じ位置に配置し、その上に配置されたオブジェクトを連続的に指定してアニメーション効果を実現します。
例：
*myback{背景色:透明}
*マイポイト
位置:絶対;
トップ:5インチ;
右:5インチ;
幅:10インチ}
BODY{背景画像:url(／画像／back.gif);}
〈class=.mypoint〉Img(src=”／image／a.gif)
〈DIV CLASS=”pile” ID=”image1” style=”z-index:4”>
〈DIV CLASS=”pile” ID=”image2” style=”z-index:3”>
〈DIV CLASS=”pine” ID=”image3” style=”z-index:2”>
〈DIV CLASS=”pine” ID=”image4” style=”z-index:1”>
上記のプログラム セグメントでは、ベース マップに光が通過できるように背景が設定されています。この効果は、従来は特別な描画ツールを使用することによってのみ実現できました。ページには4枚の写真が重ねられており、それらが生み出すアニメーション効果も非常に優れています。
6 結論
上記では、DHTML を使用して Web ページをコンパイルする方法についていくつかの研究を行いましたが、Web ページ制作者が協力してさらに深めるのを待っている技術的な問題がまだたくさんあります。
Wei Xiaotan は、北交通大学交通学部（100044、北京）の修士課程の学生です。