DHTML：動的Webコーディング

• かもしれません 6, 2024

DHTMLは D動的な HyperText Mアークアップ LHTMLとJavascriptおよびCascading Style Sheets（CSS）を組み合わせることにより、HTML Webページを動的にする技術として定義できます。このシリーズの前の4つの記事で学習した他の4つのHTMLバリエーションとは異なり、DHTMLはW3コンソーシアムによって定義された標準ではありません。むしろ、「4.x世代のブラウザがサポートする新しい技術を説明するためにNetscapeとMicrosoftが使用したマーケティング用語」です（W3コンソーシアム）。 HTML 4.0は、DHTMLの構造に固有の2つの重要なコンポーネントを最初に導入しました。

• カスケードスタイルシート（CSS）
• ドキュメントオブジェクトモデル（DOM）

コードを動的にする

CSSはスタイルモデルとレイアウトモデルを提供し、DOMはHTMLドキュメントのドキュメントコンテンツモデルを提供します。 JavaScriptとVBScriptは、HTML要素を制御するスクリプトコードを記述する機能を追加します。まとめると、これら3つのコンポーネントは動的HTMLページになります。主要な抑止要因の1つはブラウザーの非互換性です。NetscapeとMicrosoftは、ブラウザー内で何を実装するかについてまだ合意していません。したがって、両方のブラウザーで適切に機能するDHTMLページを書くのは難しい場合があります。自分で確認するには、MicrosoftおよびNetscapeの標準にオンラインでアクセスできます。

• MSDNライブラリ マイクロソフトで
• ダイナミックHTML Netscape Communicatorで

「DHTMLは、Webページの機能を強化する低帯域幅効果の作成に優れています。アニメーション、ゲーム、アプリケーションの作成、Webサイトを介した新しいナビゲーション方法の提供、および単に世界外のページレイアウトの作成に使用できます「HTMLだけでは不可能です。DHTMLの機能の多くはFlashまたはJavaで複製できますが、DHTMLはプラグインを必要とせず、Webページにシームレスに埋め込む代替手段を提供します。」（Dan Steinman、1998）。

DHTMLの複雑さを理解するには、そのコンポーネントをより詳細に調べることが役立ちます。

カスケードスタイルシート

CSSは、スタイル、位置、色、フォントなど、WebコンテンツをWeb表示から分離する洗練されたコードです。 CSSPまたはCSSポジショニングにより、HTML要素のポジショニングをピクセルレベルで制御できます。 CSS2（CSSレベル2）を使用してWebドキュメントのプレゼンテーションスタイルをコンテンツから分離すると、Webオーサリングとサイトのメンテナンスが簡単になります。 「CSS2はメディア固有のスタイルシートをサポートしているため、作成者はビジュアルブラウザー、音声デバイス、プリンター、点字デバイス、ハンドヘルドデバイスなどに合わせてドキュメントの表示を調整できます。この仕様は、コンテンツの配置、ダウンロード可能なフォント、テーブルレイアウト、国際化、自動カウンターと番号付け、ユーザーインターフェイスに関連するいくつかのプロパティ」（W3コンソーシアム）。 W3Cは、CSS2を学ぶための優れたチュートリアルを提供します。 CSS2仕様.

JavaScript

JavaScriptは、HTML要素を制御し、フォーム、フレーム、ウィンドウ、画像ロールオーバー、オーディオビデオコントロールに機能を追加し、DHTMLを操作するために使用される特別なスクリプトブラウザベースの言語です。 NetscapeはこのスクリプトJavaScriptを最初に呼び出したので、Microsoftはその特定のブランドのスクリプトを表すJScriptという用語を思いつきました。結果？迷惑なほど互換性がないJavaScriptの2つのバージョン。この問題をさらに詳しく調べるには、Netscapeの JavaScriptセントラル とマイクロソフトの JScript リソースページ。 JavaScriptコンテンツの動的な効果の秘密は、レイヤーオブジェクトの使用です。レイヤーオブジェクトは、マウスがその上をスクロールするとテキストを変更します。 Webページ内で画像またはテキストを移動させます。また、ドロップダウンメニューをドロップダウンします。レイヤーオブジェクトはdivタグに配置され、色、位置、可視性などの特性を定義します。

それらをまとめる

DHTMLは通常、3つのタスクを達成するために適用されます。

• ポジション またはコンテンツのブロックをページに配置して移動する
• スタイルの変更 ページのルックアンドフィールを変更する
• イベント処理 または、ユーザーイベントを位置の変更またはその他のスタイルの変更に関連付ける

Internet ExplorerおよびNetscapeの新しいバージョン（バージョン5、6以上）では、DOMがほとんどのDHTMLコーディングに最適なコードになりつつあります。一度マスターすると、DOMはWebデザイナーがページ上のすべてのスタイル、属性（hrefなど）、および要素（htmlタグなど）に関連するドキュメントコーディングを操作、追加、削除、および編集するのに役立ちます。つまり、htmlドキュメントに共通するすべてのタグと属性には、DOMを介してアクセスできます。現在、ドキュメントオブジェクトモデルレベル0および1がW3Cによって推奨されています。レベル2も開発中ですが、まだDHTMLコーディングの標準として宣伝されていません。

便利なチュートリアルのグループは、HTML Goodiesから入手できます。 DHTMLとレイヤーのチュートリアル.

この記事に含まれるリンクは、この最新のHTMLコーディングの開発をマスターする旅を始めるための紹介と方法を提供します。Googleでクイック検索を行うと、さらに多くのリソースが注目され、すぐに利用できます。ブラウザのメーカーが非互換性に取り組み、より高いバージョンのブラウザの使用がより一般的になるにつれて、DHTMLはプロのデザイナーの旅程の必須部分になります。

HTMLハイライト記事シリーズ

パート1： 信頼できるデザイナーはHTMLを知っているべきですか？
パート2： HTML 3.2-ウィルバーの誕生
パート3： HTML 4.0 AND 4.01-良いことをもっと！
パート4： XHTML：洗練されたデザインのためのWebコーディング
パート5： DHTML：動的Webコーディング

動画の説明: 動態網頁 （有 javascript 的網頁) -- dhtml (かもしれません 2024).