次の方法で共有


ステップ 7 ハンズオン : ASP.NET 2.0 による一貫性と柔軟性に優れたサイト デザイン その 1

サイト基盤の構築と共通 UI 部品の作成


グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

最終更新日 2005 年 11 月 17 日

目標 ASP.NET 2.0 による一貫性と柔軟性に優れた サイト デザイン
使用技術
  • ASP.NET 2.0
  • Visual Basic 2005
取り上げるトピックス
  • ASP.NET 2.0 メンバシップ, サイトマップ, SiteMapPath, TreeView, GridView
前提知識
目次
備考  

サイト基盤の構築と共通 UI 部品の作成

ここでは、新規に ASP.NET 2.0 Web サイトを作成し共通 UI 部品を作成する方法について説明します。

Web サイトを新規に作成し、セキュリティ設定ウィザードを実行します。

セキュリティ設定ウィザードの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 メンバ シップとロールの管理」を参考にしてください。

セキュリティ設定ウィザード 

ステップ 2 : アクセス方法の選択で、「ローカル エリア ネットワーク(LAN)から」を選択します。これにより、Windows 認証オプションが Web サイトに適用されます。

アクセス方法の選択 

 

サイトマップ (Web.sitemap) を新規作成します。

サイトマップの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="Default.aspx" title="Enterprise Information Portal" description="Enterprise Information Portal "> 
    <siteMapNode url="generalAffairs.aspx" title="General Affairs" description="General Affairs" />
    <siteMapNode url="humanResource.aspx" title="Human Resource" description="Human Resource" />
    <siteMapNode url="Legal.aspx" title="Legal" description="Legal" />
   </siteMapNode>
</siteMap>

サイトマップ
 

 

ヘッダー機能を提供するユーザー コントロールを、「header.ascx」という名前で作成します。

ヘッダー コントロールの作成 

ロゴ イメージを配置し、その下に SiteMapPath コントロールを配置します。

SiteMapPath コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

SiteMapPathコントロールの配置 

 

ナビゲーション メニュー機能を提供するユーザー コントロールを、「naviMenu.ascx」という名前で作成します。

TreeView コントロールを配置し、データ ソースとしてサイトマップを選択します。

TreeView コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 Web サイト ナビゲーションの実装」を参考にしてください。

ナビゲーション メニュー コントロール 

 

フッター機能を提供するユーザー コントロールを、「footer.ascx」という名前で作成します。

 CatalogZone 内に配置した DeclarativeCatalogPart コントロール

内線番号一覧情報を提供するユーザー コントロールを、「phoneNoList.ascx」という名前で作成します。このコントロールは、Web パーツとして使用します。

GridView コントロールを配置し、データ ソースとしてデータベースを選択します。社員情報を管理するテーブルより、社員番号、姓、名、拠点、内線番号の各フィールドを選択します。表示スタイルについては、後の手順でスキンにより集中管理しますので、この時点で設定する必要はありません。

GridView コントロールの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 リッチ データ コントロールによるデータ アクセス ページの実装」を参考にしてください。

 WebPartsTemplate 定義 画面

  

 

カレンダー情報を提供するユーザー コントロールを、「Calendar.ascx」という名前で作成します。このコントロールは、Web パーツとして使用します。

Calendar コントロールを配置します。表示スタイルについては、後の手順でスキンにより集中管理しますので、この時点で設定する必要はありません。

カレンダーコントロール 

ソリューション エクスプローラ 

以上で、サイト基盤が構築され、共通UI部品の作成が完了しました。

次に、『テーマとマスタ ページの作成 』について説明します。

 

ページのトップへ