解説
実例で学ぶASP.NETプログラミング
第4回 DB連携ページをASP.NETで構築する(前編)
小田原 貴樹(うりゅう)
2003/03/29
|
|
■ページを分解すると?
さて、メイン・フレーム・ページはさまざまな要素で構成されているが、大きく分けると次の画面のように4つの構成要素で成り立っていることが分かる。
|
構成要素ごとに区切ったメイン・フレーム |
「新着情報表示機能」、「サイト案内」、「季節限定酒表示機能」、「今月のお買い得酒表示機能」の4つの構成要素がある。 |
実は、この区切りはそのままTableコントロールのセル区切りを示している。最終的に各構成要素を大きなテーブルの中に入れることで、構成要素の高さなどが変化しても、一番下のラインを揃えるといったことが可能になる。これについては、ページ構築の最後の段階でもう1度触れることにして、それぞれの構成要素を作成していこう。
■新着情報表示機能の作成
メイン・フレームの上部にあるのは「新着情報の表示機能」だ。これは、データベース内のテーブル[新着情報]に格納されているレコードの中から、最後のレコードを表示する機能になっている。
この[新着情報]のデータ編集は、連載の後半で構築方法を解説する予定の業務処理サイトに専用の機能があるのだが、ここでは取りあえずデータを表示する機能部分を作成する。表示するデータは直接入力してもらえば問題ないので、以下の手順を参照して先にデザインを作ってしまおう。必要な画像ファイルは前もってプロジェクトに追加しておこう。手順が分からなければ、連載第2回(2)を参考にしてほしい。
|
新着情報表示機能のデザイン作成:手順1 |
|
|
ソリューション・エクスプローラから「img5.gif」を選び |
|
|
ページにドラッグ&ドロップする。 |
|
|
新着情報表示機能のデザイン作成:手順2 |
新しいLabelコントロールを貼り付け、[Text]プロパティを編集して適当な文章を入れて、画像の上に配置する。このコントロールは静的なものなので、文字の色や大きさなど自由にしていただきたい。 |
|
新着情報表示機能のデザイン作成:手順3 |
|
|
もう1つ新しいLabelコントロールを貼り付け、図のような位置に配置・サイズを調整する。 |
|
|
ここではフォント・サイズを「15px」で指定している。また、コントロールのIDは必ず「NPL1」にすること。 |
|
2つのLabelコントロールのうち、手順2で作った方には文字を直接入力して静的な案内として利用している。手順3で作ったもうひとつのLabelコントロール[NPL1]に対して新着情報表示機能を加えることにしよう。
Insider.NET 記事ランキング
本日
月間