| 5-3：テンプレ元HTML制作 |
|
|
| 2006/04/30 日曜日 01:27:46 JST | |
|
さて、画像も用意できましたので、オリジナルテンプレート用元HTMLを作っていきます。5-1では、サイトオフラインページを改造しましたが、offline.php にhtmlタグを書き入れる事で表示画面デザインを変更しました。逆にテンプレートの場合は、htmlにJoomla!のPHPコードを書き入れるといった作業になります。htmlを作る際には、この事を考慮しながら作っていかなければなりません。
今回は、通称「テーブルレイアウト」で作ります。テーブルを入れ子構造に組み上げ、セル内に画像を配置、または背景画像を指定して、ページデザインを固定化する方法です。多くの企業サイトでも基本はこの作り方ですが、W3Cでは、レイアウトのために「テーブルタグ」を使用することは、推奨されていません。企業サイトの設計思想であるターゲットブラウザで見た目を同じにする。それ以外には、それなりの見た目を確保する。といった趣旨で制作される方にお勧めです。通常、アカデミックなサイトでは敬遠されるようです。が、最近はFlash等の影響で見た目重視のなんでもありのサイトが増えてきました。
ほかにも、いろいろ文法・作法の上での問題はあると思いますが、テンプレート制作の基本的な説明に絞って、手順とHTMLソース全文、完成画像をご紹介します。なお、このhtmlは、「HTML 4.01 Transitional」の仕様で作成されており、Joomla!用のテンプレートへ作りかえる際には、修正が必要です。 1. 画面を３分割するテーブルを作る。
ステージをセンターに置き左右の背景部に手をいれるための前処理。１行３列のテーブルを作ります。テーブル幅を100%、左右のセル幅を50%、センターセル幅を760pxに固定化します。
さて、ここではページデザインを固定化するためにテーブルを組んでいきますが、同時にJoomla!システムで決められた「ポジション名」を具体的に配置することを想定して作っていきます。  2. 新規テーブルを挿入し、背景・センターセルを分割する。
左右のセルに１行１列のテーブルを入れ、背景を分割します。これにより左右背景をパターンとパターン、パターンと写真といった組み合わせを可能にします。分割の割合は、挿入したテーブルの高さを指定し決定できます。センターセルに７行１列のテーブルを挿入します。
 3. セルを目的別に調節します。
７つのセルは下記の表示領域を規定します。この段階ではただ想定してスペースを確保するといった事だけです。TD（仮にp-top,p-main,p-bottomと呼びます）以外のセルに背景画像を指定します。
この中でJoomla!「ポジション名」である、「user5」「footer」「debug」が、表示される位置を想定しています。  4. セル(p-top)内にテーブル追加
これは画像のみを配置するためだけテーブルです。絵は１行２列のテーブルですが、実際のhtmlでは１行３列にしました。
 5. セル(p-top)内にさらにテーブル追加
こフレーム画像の左右のエッジ画像部分を指定しています。１行3列のテーブルです。
 6. 上の中央セル内にさらにテーブル二つ追加
Joomla!「ポジション名」である、「banner」「user3」を想定し、表示位置をテーブルで指定しています。〈sitename〉は、文字通りサイト名を表示する位置を指定しています。真ん中のテーブルは１行２列です。
 7. (p-main)内にテーブル追加
Joomla!「ポジション名」である、「left」とメインコンテンツ部を想定し、表示位置をテーブルで指定しています。右側エッジ画像の表示位置も指定。ここでは、左セルを仮に(L-td)と呼びます。まだこのセルを「left」と決めたわけではありませんが、別に「left」と決めても問題ありません。
 8. メインコンテンツ部とLeft部のテーブル追加
Joomla!「ポジション名」である、「left」用に(L-td)内にテーブルを追加します。ここにメインモジュールとかモジュール類が表示されることを想定しています。たとえば、(L-td)内にもう一つテーブルを追加して、それを「user8」とする事も可能です。
中央部に３つのテーブルを挿入しています。  9. 下部(p-bottom)にテーブル追加
ちょっと複雑なテーブル一つを挿入しています。２行５列ですが、ところどころセルを連結しています。詳細はこのページ下部のソースを見てください。ところで、「user3」というポジション名はすでに一度出てきていますが、もう一度同じポジション名ですが、これは、ボトムメニューにする予定です。
 10. 下部(p-bottom)にフレームエッジ画像用テーブル追加
１行３列のテーブルを挿入しています。
 11. 画像を指定して完成です。
これで、それぞれのセルに画像を指定して完成です。最終的には下記のように複雑でうんざりするような、見るからに重そうなテーブル枠が出来上がります。が、
  ここまで、複雑にする必要はなく、たとえばこのページの工程番号２の段階でもそれぞれのセルに上に示すようなポジションを割り付ければ立派に機能します。下記にこのHTMlを制作中の状態をご紹介します。使用ソフトはAdobe GoLiveです。
 このHTMLのソースをご紹介します。各テーブルのsummaryに「layout table 0-1L3R」とありますが、最初の番号は通し番号。次は１行３列の意味です。PHPコードを埋め込む時の目印みたいなものです。これは、制作者にしか意味のない説明なので、最終的には削除します。
<html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8 "> <title>net-mon-star_PPSgreen</title> <script type="text/javascript" src="setimg.js"></script> </head> <body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" summary="layout table 0-1L3R"> <tr> <td valign="top" width="50%" background="images/back_rg.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="140" summary="back-top-left layout table 13-1L1R"> <tr> <td background="images/back_db.gif"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> </tr> </table> </td> <td width="760" valign="top" background="images/back_rg.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="layout table 1-7L1R"> <tr> <td background="images/back_db.gif"></td> </tr> <tr> <td height="4" background="images/back_db.gif"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> </tr> <tr> <td height="122" background="images/back_db.gif"> <table width="100%" height="41" border="0" cellspacing="0" cellpadding="0" summary="head1 layout table 2-1L3R"> <tr> <td width="723"><img src="images/Sgreen_3.png" alt="" height="41" width="723" border="0"></td> <td background="images/Sgreen_4.png"><img src="images/Sgreen_4.png" alt="" height="41" width="5" border="0"></td> <td width="32"><img src="images/Sgreen_5.png" alt="" height="41" width="32" border="0"></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="head2 layout table 3-1L3R"> <tr> <td width="13" height="81" background="images/Sgreen_7.png"><img src="images/Sgreen_7.png" alt="" height="81" width="13" border="0"></td> <td valign="bottom" width="100%" height="81" background="images/bcolor.png"> <table width="735" border="0" cellspacing="0" cellpadding="0" summary="title layout table 4-1L2R"> <tr> <td width="300"></td> <td align="right" width="435"></td> </tr> </table> <table width="735" border="0" cellspacing="0" cellpadding="0" summary="topmenu layout table 5-1L1R"> <tr> <td align="right"></td> </tr> </table> </td> <td width="12" height="81" background="images/Sgreen_9.png"><img src="images/Sgreen_9.png" alt="" height="81" width="12" border="0"></td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="main layout table 6-1L3R"> <tr> <td valign="top" width="160" background="images/Sgreen_24.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="left layout table 7-1L1R"> <tr> <td> </td> </tr> </table> </td> <td valign="top" width="588" background="images/mainbackl.png"> <table width="588" border="0" cellspacing="0" cellpadding="0" summary="P-S-main layout table 8-3L3R"> <tr> <td width="6" height="30" background="images/Sgreen_12.png"><img src="images/Sgreen_121.png" alt="" height="30" width="6" border="0"></td> <td width="576" height="30" background="images/Sgreen_12.png"></td> <td width="6" height="30" background="images/Sgreen_12.png"><img src="images/Sgreen_122.png" alt="" height="30" width="6" border="0"></td> </tr> <tr> <td width="6" height="30" background="images/Sgreen_17.png"><img src="images/Sgreen_16.png" alt="" height="30" width="6" border="0"></td> <td width="576" height="30" background="images/Sgreen_17.png"></td> <td width="6" height="30" background="images/Sgreen_17.png"><img src="images/Sgreen_172.png" alt="" height="30" width="6" border="0"></td> </tr> <tr> <td width="6" background="images/main_l.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> <td bgcolor="#f6faf5" width="576"> <table width="100%" border="0" cellspacing="2" cellpadding="0" summary="main-right layout table 9-1L2R" height="100%"> <tr> <td></td> <td width="160"></td> </tr> </table> </td> <td width="6" background="images/main_r.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> </tr> </table> </td> <td width="12" background="images/Sgreen_14.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> </tr> </table> </td> </tr> <tr> <td valign="top" background="images/back_rg.gif"> <table width="760" border="0" cellspacing="0" cellpadding="0" summary="bottom1 layout table 10-2L5R"> <tr> <td width="20"><img src="images/Sgreen_381.png" alt="" height="27" width="20" border="0"></td> <td width="173"><img src="images/Sgreen_38.png" alt="" height="27" width="173" border="0"></td> <td background="images/Sgreen_39.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> <td rowspan="2" width="48"><a href="javascript:location.reload()" onmouseover="return setImage('ptop', 'on')" onmouseout="return setImage('ptop', 'of')"><img name="ptop" src="images/ptop_of.png" alt="" height="49" width="48" border="0" /></a></td> <td rowspan="2" width="12"><img src="images/Sgreen_42.png" alt="" height="49" width="12" border="0"></td> </tr> <tr> <td width="20"><img src="images/Sgreen_43.png" alt="" height="22" width="20" border="0"></td> <td colspan="2" background="images/bcolor.png"></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="17" summary="bottom2 layout table 11-1L3R"> <tr> <td width="60"><img src="images/Sgreen_46.png" alt="" height="17" width="60" border="0"></td> <td background="images/Sgreen_48.png"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> <td width="60"><img src="images/Sgreen_49.png" alt="" height="17" width="60" border="0"></td> </tr> </table> </td> </tr> <tr> <td height="32" background="images/back_rg.gif"></td> </tr> <tr> <td background="images/back_rg.gif"></td> </tr> </table> </td> <td valign="top" width="50%" background="images/back_rg.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="140" summary="back-top-right layout table 12-1L1R"> <tr> <td background="images/back_db.gif"><img src="images/spacer.gif" alt="" height="1" width="1" border="0"></td> </tr> </table> </td> </tr> </table> </body> </html> |
|
| 最終更新日 ( 2006/09/12 火曜日 12:09:46 JST ) |
| < 前へ | 次へ > |
|---|
