サイト内検索: ナビゲーション リンクのスキップ

  昨日:17  本日:4  合計:79514


マスタページとサイトマップの利用

 マスタページを利用すると、Webサイト内のページを同じデザインで統一することができます。
 このページでは、サイトマップとCSS(カスケード スタイルシート)を利用した例を紹介します。

 動作サンプル
(このページ自体でも利用していますが、上記サンプルはもっと簡易なものです。)

 サンプルファイルダウンロード

■ MasterPage.master(マスタページ)ファイル

1.スタートメニューよりVWD2008を起動し、新しいWebサイトを作成します。(名前は何でも構いません。)

2.ソリューションエクスプローラーの「C:\...」(Webサイト名)の上で右クリックしてメニューを表示し、[新しい項目の追加]をクリックすると、ウインドウが表示されますので、「マスタページ」を選択して、[追加]ボタンをクリックします。
 

3.マスタページをデザインビューに切り替えて、「CntentPanelHolder1」にカーソルをセットしてから、[←]キーを押します。
 その状態(カーソル位置)で、上部メニューの[ツール]→[テーブルの挿入]をクリックして、ウインドウを表示し、2×2、テーブル幅100%、「隣接するセルの枠線を重ねて表示する」にチェックしてテーブルを挿入します。
 

4.「CntentPanelHolder1」をドラック&ドロップして、その上に挿入されているテーブルの右下枠に移動させます。
 

5.下表のようにプロパティを設定してデザインを整えます。
 

部分(タグ) プロパティ
<td>(左上) bgcolor #6699FF
height 50
width 200
<td>(右上) align center
bgcolor #6699FF
<td>(右上) bgcolor #6699FF
height 600
valign top
<td>(右下) valign top

■ StyleSheet.css(カスケード スタイルシート)ファイル

6.ソリューションエクスプローラーの「C:\...」(Webサイト名)の上で右クリックしてメニューを表示し、[新しい項目の追加]をクリックすると、ウインドウが表示されますので、「スタイルシート」を選択して、[追加]ボタンをクリックします。
 

7.編集画面が表示されますので、{ }の間にカーソルを移動して右クリックし、[ビルドスタイル]をクリックしてウインドウを表示します。
 今回は、「フォント」の「font-family」を MS ゴシック,Courier New,monospace、「font-size」に 12 と入力し、[OK]ボタンをクリックします。
 

8.マスタページデザインビュー(上部タブ)に切り替えて、ソリューションエクスプローラー内の StyleSheet.css を、マスターページ上にドラッグ&ドロップして適用させます。
 

■ Web.sitemap(サイトマップ)ファイル

9.ソリューションエクスプローラーの「C:\...」(Webサイト名)の上で右クリックしてメニューを表示し、[新しい項目の追加]をクリックすると、ウインドウが表示されますので、「サイトマップ」を選択して、[追加]ボタンをクリックします。
 

10.編集画面が表示されますので、<siteMapNode・・・>~</siteMapNode>の間を、予定されるページ名等に書き換えます。

 url属性    :リンク先のページのパス
 title属性   :メニューとして表示する文字列
 description属性:メニュー上にマウスポインタを移動したときに表示する文字列

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="Default.aspx" title="ホーム">
   <siteMapNode url="content1.aspx" title="コンテンツ1" />
   <siteMapNode url="content2.aspx" title="コンテンツ2" />
   <siteMapNode title="カテゴリ1">
     <siteMapNode url="content3.aspx" title="コンテンツ3" />
   </siteMapNode>
 </siteMapNode>
</siteMap>

11.ツールボックスの「ナビゲーション」カテゴリから[TreeView]を、「データ」カテゴリから[SiteMapDataSource]を、マスターページ上のテーブル左下枠にドラッグ&ドロップします。
 

12.配置されたツリービュー(Treeview1)の右上の矢印または、右クリック[スマートタグの表示]で、スマートタグを表示し、「データソースの選択」のプルダウンメニューの[SiteMapDataSource1]を選択します。
 

■ マスタページを反映させたページの作成

13.最初に自動作成されている Default.aspx を一度削除し、ソリューションエクスプローラーの「C:\...」(Webサイト名)の上で右クリックしてメニューを表示し、[新しい項目の追加]をクリックすると、ウインドウが表示されますので、「Webフォーム」を選択して、○印の「マスタページを選択する」にチェックをして、[追加]ボタンをクリックします。
 


CopyCopyright (C) 2009-2009 ケンゾー
初版:2009年5月30日、最終更新:2009年5月31日
http://www.xox.bz/v>