ご存知のとおり、Web サイトの制作には、グラフィック デザイン、HTML ページの制作、CSS スタイル定義、クライアント側のスクリプティング (JavaScrfipt/VBScript)、サーバー側のスクリプティング (Asp/Asp.Net/PHP/JSP) など、さまざまな側面の知識が必要です。 、などの内容です。今回は、簡単なHTMLサイトの作り方を中心に、最も基本的なことから始めてその楽しさを体験していきます。
1. ここで著者が使用した Web ページ作成ツールは Dreamweaver です。まずDreamweaverを起動し、「ファイル」→「新規」メニューを選択すると、図1のようなウィンドウが表示されます。
2. このウィンドウの「基本ページ」タブには 7 つのオプションがあります。「HTML」項目を選択して「作成」ボタンをクリックすると、作成ワークスペースが空白になります。これは、HTML ページが正常に作成されたことを意味します。コード ビューをクリックすると、図 2 に示す内容が表示されます。
3. 表示された HTML ページ コードの具体的な意味は無視して、まず「タイトルのないドキュメント」を「Web ページ デビュー」に変更してから、デザイン ビューを選択します。 「メニュー」→「挿入」→「HTML」→「フレーム」→「上」をクリックすると、Webページの上部にフレームが挿入されます。このとき、ウェブページは上部フレームと下部フレームの２つのフレームに分割される。フレームを選択した後、「メニュー」→「挿入」→「HTML」→「フレーム」→「左」コマンドを選択すると、Web ページの左側にフレームが挿入されます。
4. 「Ctrl+S」をクリックして各フレーム（top.htm、left.htm、right.htm）を保存します。次に、左のフレームを選択し、「メニュー」→「挿入」→「ハイパーリンク」コマンドをクリックすると、図3のダイアログボックスが表示されます。このダイアログボックスには、「テキスト」がリンクに表示される文字列、「リンク」がクリック後にジャンプするページのアドレス、「ターゲット」が表示されるフレームの各項目を入力します。ここでは、「ターゲット」として mainFrame (つまり、左側のフレーム) を選択し、この手順に従ってハイパーリンクの挿入を続けます。次に右フレームのコードビュー（right.htm）に入り、<body></body>に<marquee direct=left align=middle>Welcome to my website!!!</marquee>と入力します。特殊効果により、テキストを上下左右に移動させることができます。方向を (上、下、左、右) に変更すると、テキストの移動方向を変更できます。
5. フレームを含む HTML ページを作成したので、上部のフレーム (top.htm) にバナーを追加します。バナーでは、JavaScript の動的効果を実行できます。動的交換効果の具体的なコードは、Top.Htm ページのソース コードで確認できます。ここでは、作成者が重要なコードのみを示しています。
バナーAD[0]=pic173.gif;
バナーADlink[0]=http://www.sina.com;
バナーAD[1]=pic1732.gif;
バナーADlink[1]=http://www.sohu.com;
コードの説明: 上記は JavaScript 配列です。bannerAD は画像を保存し、bannerADlink は画像をクリックした後のリンクを保存します。必要に応じて画像を追加または削除できます。
6. 引き続き、右側のフレームのハイパーリンクのページを作成します。特定のコンテンツは自分でカスタマイズできます。 「ファイル」メニューを選択し、「新規」をクリックし、HTML を選択して一連のページを作成します。ページの名前は、リンクを挿入するときに書き込まれた名前と一致している必要があります。著者は元の文書で 2 つの例 (最新ニュースと人気の有名人) を作成しており、読者は自分でさらにコンテンツを追加してみることができます。このようにして、図 4 に示すように、HTML Web サイトのプロトタイプが作成され、ページの最終的な効果が示されます。
動的効果はスクリーンショットには反映されません。読者は IE でソース ファイルの Index.htm を直接開くことができます。開いた後、「ブロックされたコンテンツを許可する」というプロンプト メニューが表示されます。 (図5)。
概要: 今回は、Dreamweaver を使用して、JavaScript、HTML フレームワーク、ハイパーリンク、その他のテクノロジを使用する単純な HTML サイトを作成する方法を紹介します。さらに、上で見たコンテンツブロックのプロンプトは、Web ページがサイトに公開されていないためです。次号では、著者がさらに刺激的な内容をお届けします。