第 4 章 Doking の BLOG ホームページの実装
すべての準備が整ったので、Doking の BLOG のページ設計とデータベース フロントエンドの実装を開始する必要があります。
ここでは、Web アート作成の知識ではなく、Dreamweaver MX2004 で Web サイトの内部ページを構築する考え方と方法について説明します。
4.1.1 Web サイトのデザインのアイデア
各 Web ページを開始する前に、基本的なページ デザインは通常、Firworks または Photoshop などの画像デザイン ソフトウェアでデザインする必要があります。図 4-1-1 は、Photoshop でデザインされた基本的なページ デザインです。
図 4-1-1 Doking's BLOG の基本的なページデザインは
図 4-1-1 にあります。 ①赤い四角の部分は Web ページの左側の列です。以下の章で順次追加していきますが、通し番号②の赤四角の部分はWebサイトのナビゲーションバーで、章で構築したdkblog.mdbデータベースのLMテーブルから動的に生成されます。 3.基本的なアイデアが明確になったら、Web サイトのテンプレートの作成を開始します。
4.1.2 Web サイト テンプレートを構築するためのデザイン アイデア
: Web サイト テンプレートを構築し、Web サイトの Web デザインを統一します。 Web サイトの列メニューのコンテンツは、データ テーブルの動的 LM によって生成されます。これにより、Web サイトの列メニュー コンテンツの変更も容易になります。
(1) [ファイル]→[新規]を開き、[新しいドキュメント]のダイアログボックスを開き、「テンプレートページ」として「カテゴリー:」を選択し、「ASP.NET VBテンプレート」として「テンプレートページ:」を選択します。 4-1-2に示すように図のようになります。
図 4-1-2 新しいテンプレートダイアログボックス
(2) 「作成」ボタンをクリックし、レイヤーを挿入し、そのプロパティウィンドウで ID を「main」に設定し、「左 (L)」と「上 (T)」を変更します。 )」を0px、「幅(W)」を100%、配置を中央揃えに設定します。これはWebページを中央に配置するためのものです。
(3) 表を挿入し、ID を「bodyT」に設定し、幅を 780 ピクセルに設定し (これは基本的なページ デザインの幅に基づいて設計されます)、単位セルの余白と間隔を 0 に設定し、枠線の太さを0に設定します。
(4) 「bodyT」テーブルの2行目の縦方向の配置を先頭にして2列に分割し、1列目の幅を220px、1列目の幅を560pxに設定します。割り当てられた列の色も (基本的なページ デザインによって割り当てられた) に基づいて、列 1 の背景色を RGB (236, 236, 236) に設定します。
(5) 「bodyT」テーブルの1行目と3行目に対応する背景画像を挿入し、1行目の縦方向の配置を下に、横方向の配置を右に設定します。
(6) 必要に応じて、タイトル、文字サイズ、接続文字の色、配色などもデザインできます。
(7) ウェブサイトのナビゲーションバーを設置します。
① Access2003 を起動し、dkblog.mdb データベースを開き、図 4-1-3 に示すように、LM テーブルの LM フィールドに、グラフィック デザイン、3D デザイン、Web デザイン、ネットワーク プログラミングの 4 つのレコードを順に入力します。 。
図 4-1-3 LM テーブルのデータ入力
② Dreamweaver に戻り、[サーバー動作] パネルに切り替えて、[+] ボタンをクリックし、図 4- に示すように、ドロップダウン メニューで [データ セット] を選択します。 1-4.
図 4-1-4 データセットの追加
③ ポップアップした[データセット]ダイアログボックスで、データセット名を「menuda」と入力し、接続ドロップダウンメニューで「dkconn」を選択し、LMテーブルを選択します。テーブルのドロップダウン メニューで [列が "すべて" オプションを選択し、並べ替えドロップダウン メニューでフィールド "LMID" を選択し、並べ替えを昇順に設定します。結果は図 4-1-5 に示されています。 :
図 4-1-5 データセットダイアログボックス
④ 「テスト」ボタンをクリックすると、図 4-1-6 のダイアログボックスが表示され、データセットが正常に作成されたことが示されます。「OK」ボタンをクリックして完了です。 。
図 4-1-6 データセットテストダイアログボックス
⑤ [バインディング]タブに切り替え、図 4-1-7 に示すようにデータセット (メニュー) のフィールドを展開します。
図 4-1-7 Binding タブ
⑥ 図 4-1-8 に示すように、LM フィールドをテーブル bodyT の最初の行にドラッグします。
図 4-1-8 LM フィールドをドラッグします。
⑦ マウスを放すと、1 行目に網掛け文字 {menuda.LM} が追加され、その前に「Home Page |」と入力し、記号「」を入力します。 | お問い合わせ」の結果を図 4-1-9 に示します。
図 4-1-9 bodyT テーブルへのデータの
バインド ⑧ 網掛け文字 {menuda.LM} とそれに続く文字「|」を選択し、[挿入]メニュー→[アプリケーションオブジェクト]→[リピートエリア]を選択し、ポップ図4-1-10に示すように、[リピートエリア]ダイアログボックスでデータセットを「menuda」として選択し、表示されているレコードを「すべてのレコード」として選択し、「OK」ボタンをクリックしてWebサイトのナビゲーションを完了します。メニュー。
図4-1-10 繰り返し領域ダイアログボックス
(7) 表本体Tの2行2列目にマウスを移動し、[挿入]メニュー→[テンプレートオブジェクト]→[編集可能領域]を選択し、[新規編集可能領域]をクリックします。図 4-1-11 に示すように、ダイアログ ボックスで「mainbody」という名前を入力し、「OK」キーを押します。
図 4-1-11 新しい編集可能領域の作成
これで、Web サイト テンプレートの最初の作業が完了しました。テンプレートを bkblog.dwt.aspx として保存します。
4.1.3 ホームページのページデザインのデザインアイデア
: Web サイトテンプレートの構築作業が完了したら、それを使用して Web サイトを構築および更新します。
(1) 新しい「ASP.NET VB」動的ページを作成し、[変更]メニュー→[テンプレート]→[テンプレートをページに適用]を開き、ポップアップされる[テンプレートの選択]ダイアログボックスで、テンプレート「dkblog」を選択します図 4-1-12 に示すように、「」を選択し、「選択」ボタンをクリックします。
図 4-1-12 テンプレートの選択
(2) 「本体」の編集可能エリアにマウスを移動し、テーブルを挿入し、その ID を「ztre」に設定します。 実際には、図 4-1-13 のように設計されています。 . これが各学習ノートに表示される内容です。
図 4-1-13 各スタディノートに表示される内容
このセクションで説明するデータセットの挿入は、前のセクションで説明したほど単純ではありません。まず、図 4-1-13 を見てください。各研究ノートには、トピック、公開時刻、ノートのカテゴリ (つまり、属するサブカラム)、著者 (名前)、および返信 (番号) が表示されます。 ZT テーブルの設計図 (セクション 3.2 の図 3-2-2) を見ると、LMID (分類列の ID) のみがあり、そこにある LM テーブルに接続することで取得できる列名がありません。 YHID (発行者の ID) のみですが、著者名は接続する必要がありません。YH テーブルからのみ取得できます。他のデータは ZT テーブルから取得できます。 「とても複雑です!」実は、すべての困難は Access で解決できますので、ご安心ください。
4.2.1 データテーブル接続クエリの確立
(1) Access2003を起動し、[クエリ]→[デザインビューでクエリの作成]をダブルクリックすると、図4-2-1のような[テーブルの表示]ウィンドウが表示されます。 :
図 4-2-1 クエリ接続テーブルの追加
(2) LM テーブル、ZT テーブル、YH テーブルを順に追加します。結果は図 4-2-2 に示されます。
図 4-2-2 データ テーブル接続ビュー
(3) 図 4-2-3 に示すようにクエリ フィールドを設計します。
図 4-2-3 クエリ フィールドの設計図
(4) このクエリを ZTRE として保存し、Access でデータ テーブル接続クエリを完成させます。
4.2.2 データセットの挿入
(1) Dreamweaver に戻り、[サーバー動作] パネルに切り替え、「+」ボタンをクリックしてデータセット Ztre を追加し、Access で作成したばかりのクエリ ZTRE としてテーブルを選択し、その他の関連する図 4-2-4 に示すように、設定:
図 4-2-4 Ztre データセットの設定
(2) [バインディング]タブに切り替え、データセット(Ztre)を展開し、フィールド ZTNAME をドラッグしてテーブル ztre 内の「Study Note Topic」と置き換え、ドラッグフィールド ZTTIME を「Publish」Time」に置き換え、フィールド LM をドラッグして「Category」を置き換え、フィールド ZYTEXT をテーブル ztre の 2 行目の空白スペースにドラッグします。他のデザインを図 4-2-5 に示します。
図 4-2-5 ztre テーブルへのデータのバインド
(3) [サーバー動作] パネルに切り替えます。ダイナミック テキスト (Ztre.ZYTEXT) をダブルクリックして選択します。図 4-2-6 に示すように、形式は「エンコーディング - HTML エンコーディング」形式です。
図 4-2-6 ダイナミックテキストフォーマットの設定
(4) テーブル ztre の 1 行目、2 行目、3 行目を選択し、繰り返しエリアとして定義します。 設定は図 4-2-7 のようになります。
図 4-2-7 繰り返し領域の定義
これで、ホームページにデータ セットとデータ バインディングを挿入する作業は完了です。
(1) 図 4-3-1 に示すように、「ホーム」を選択し、[サーバー動作] パネルで [+] ボタンをクリックし、[データセット ページング] → [最初のページに移動] を選択します。
図 4-3-1 データ セット ページング メニュー
(2) 図 4-3-2 に示すように、ポップアップ ダイアログ ボックスでデータ セットを Ztre として選択し、「OK」キーを押します。
図 4-3-2 最初のページに移動ダイアログボックス
(3) 「前のページ」を選択し、データセットページングの「前のページに移動」として定義します。 「次のページ」を選択し、データセットとして定義します。ページネーションの場合は「次のページに移動」、データセットのページネーションの「最後のページに移動」を定義するには「最後」を選択します。
(4) 「ページ番号」を「現在のページ番号」に変更します。 [サーバーの動作]パネルで、「+」ボタンをクリックし、[レコード数を表示]→[現在のページ番号を表示]を選択します。
(5) Index.aspx を保存し、Access の対応する ZT テーブルと YH テーブルにいくつかのレコードを入力し、IE ブラウザで参照します (次の章で特別な指示がない場合は、図 4-3-3 に示すように、メモはすべて「ネットワーク プログラミング」列に属します。
図4-3-3 ホームページ閲覧イメージ