CSS ベースの固定ページレイアウトの作成 - パート 1

このチュートリアルでは、NetBeans Visual Web JSF フレームワークを使用して CSS ベースの固定ページレイアウトを作成します。パレットにあるさまざまなレイアウトパネルやその他の HTML 要素を使用してページのレイアウトを完成させます。

目次

• アプリケーションの作成
• ヘッダーの内容の追加
• 左サイドバーの内容の追加
• 右サイドバーの内容の追加
• フッターの内容の追加
• メインメニューへの内容の追加
• まとめ

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

* NetBeans IDE の Java EE 5 機能を活用するためには、GlassFish アプリケーションサーバー V2 UR2 などの、Java EE 5 仕様に完全に準拠したアプリケーションサーバーを使用してください。別のサーバーを使用している場合は、「リリースノート」と「FAQ」で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

NetBeans IDE 6.1 を使用している方へ

• NetBeans 6.1 でプロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。
• NetBeans IDE 6.1 には、要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

アプリケーションの作成

このチュートリアルでは、CSS ベースの 1 ページの Web アプリケーションを作成します。最初に次の図のようなレイアウト構造のページを組み立てます。

1. Visual Web JSF フレームワークを使用する Web アプリケーションを作成します。プロジェクト名を com.samples.layout、デフォルトのソースパッケージを fixedpagelayoutex にします。

   注: NetBeans 6.1 では、プロジェクトを作成するときに新しいオプションが表示されますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。

   Page1.jsp ファイルがビジュアルデザイナで開きます。

2. 「プロジェクト」ウィンドウで「Web ページ」ノードを展開し、「Page1.jsp」を右クリックして「リファクタリング」>「名前を変更」を選択します。

   「名前を変更」ダイアログが表示されます。

3. 「名前を変更」ダイアログで、ページの新しい名前として「PageLayout1」と入力します。名前変更をコメントに適用することを選択し、「リファクタリング」をクリックします。

   「プロジェクト」ウィンドウとビジュアルデザイナのタブでページの名前が変更されます。

4. 「JSP」タブをクリックして、JSP エディタを開きます。次の HTML を <form> コンポーネントに追加します。

   コード例 1: JSP の編集

   <div id="container"> <div id="header"> Header </div> <div id="leftBar"> Left Bar </div> <div id="content"> Main Content </div> <div id="rightBar"> Right Bar </div> <div id="footer"> Footer </div> </div>

5. 「プロジェクト」ウィンドウでリソースフォルダを右クリックし、「新規」>「階層式スタイルシート」を選択します。

6. 「新規 階層式スタイルシート」ウィザードで、ファイル名として「layout」と入力し、「完了」をクリックします。

   「プロジェクト」ウィンドウのリソースノードの下に layout.css が表示されます。
7. PageLayout1.jsp のデザインビューに戻ります。パレットの「拡張」セクションから、「リンク」コンポーネントをビジュアルデザイナにドラッグ＆ドロップします。
8. 「ナビゲータ」ウィンドウで「リンク」コンポーネントを選択します。「プロパティー」ウィンドウで「URL」を「/resources/layout.css」に設定します。
9. 「プロジェクト」ウィンドウで「layout.css」をダブルクリックしてビジュアルデザイナで開きます。

10. 次の CSS 規則を layout.css に追加します。

    コード例 2: CSS 規則の追加

    #container { margin:auto; width: 760px; background: #ffffff; } #header { background: #DDDDDD; } #leftBar { float: left; width: 150px; background: #EBEBEB; } #content { float:left; width:450px; background-color: #cdcde6; } #rightBar { float: right; width: 160px; background: #EBEBEB; } #footer { clear:both; background:#DDDDDD; }

    
    青色で強調表示される CSS プロパティーに特に注意してください。これらは、コンテナ (
    ) を正しい位置に配置する役割を果たします。フッターの CSS 規則にはプロパティー clear:both があります。これは、フッターが常にほかのフローティング要素の背面に配置されるように、その両端を clear にする必要がある (両側にフローティング要素を許可しない) というヒントをブラウザに示します。
11. ボーダーを表示するには、「ナビゲータ」ウィンドウで「div:container」を選択し、その「style」プロパティーの「ボーダー」を solid、5 ピクセル幅に設定し、デフォルトの色の黒にします。
12. プロジェクトノードを右クリックし、「実行」を選択してアプリケーションを配備します。ブラウザに、次の図のようなページが表示されます。

ヘッダーの内容の追加

最初にヘッダーをページに追加し、次にその内容を追加します。

1. パレットの「レイアウト」セクションから、「レイアウトパネル」コンポーネントをビジュアルデザイナ内の header <div> にドラッグ＆ドロップします。

   注: レイアウトパネルのデフォルトのサイズは 128 x 128 ピクセルです。

2. JSP エディタを開き、header <div> の内容 Header を削除します。

3. ビジュアルデザイナでレイアウトパネルを選択します。レイアウトパネルの「プロパティー」ウィンドウで「style」プロパティーの横の省略符号 (...) をクリックします。

   スタイルエディタが開きます。

4. レイアウトパネルのスタイルエディタで、高さを 175px、幅を 760px に設定します。

   注: この幅は、layout.css で指定した container <div> の幅と同じです。

5. スタイルエディタを使用して、レイアウトパネルの背景画像を設定します。

   ヘッダー画像がない場合は、ここからダウンロードして使用できます。
6. 「了解」をクリックして変更を保存します。

7. 「プロパティー」ウィンドウで「panelLayout」プロパティーを「グリッドレイアウト」または「フローレイアウト」に設定します。

   注: 「グリッドレイアウト」を選択すると、ほかのコンポーネントをページに配置しやすくなります。フローレイアウトを使用する場合は、コンポーネントの配置にほかのレイアウトコンポーネントを使用する必要があります。

8. レイアウトパネルに静的テキストをドラッグ＆ドロップし、その「text」プロパティーを「Fixed Page Layout 1」に設定します。 スタイルエディタを使用してテキストのスタイルを変更します。

9. アプリケーションを実行します。アプリケーションは次の図のようになります。

   

左サイドバーの内容の追加

次にページの左側にナビゲーションバーを追加します。内容はハイパーリンクだけを追加してシンプルにします。

1. leftBar <div> に「グリッドパネル」コンポーネントをドラッグ＆ドロップします。

   注: グリッドパネルのデフォルトのサイズは 128 x 128 ピクセルです。グリッドパネルにコンポーネントを追加すると、グリッドパネルの最初のサイズは破棄されます。

2. JSP エディタで、leftBar <div> の内容 Left Bar を削除します。
3. パレットの「基本」セクションから、「ハイパーリンク」コンポーネントをいくつかグリッドパネルにドラッグ&ドロップします。ナビゲータウィンドウで、ハイパーリンクがすべてグリッドパネル内にあることを確認し、必要な場合は並べ替えます。

4. アプリケーションを実行します。アプリケーションは次の図のようになります。

   

右サイドバーの内容の追加