HOME>アドレス帳
kon`s produce webdesign lecture! | |
<<|アドレス帳|テンプレート集|ユーザビリティ|>> |
アドレス帳 | ||||||||||
|
■adress-book ホームページ作成全般でよく使われる。 システム手帳のように目次とページが一体化していて、目次のリンクを押すとページが変わる。 <frame>タグを使った方法が一般的だったが、SEO対策のために<table>タグが使われるようになる。 |
|||||||||
アドレス帳風リンク。 アドレス帳をめくる様な操作でページが変わるようにする。 メニュー(目次等)によく使われます。 ここではテーブルタグを使用して、同じ形をした表を何枚か作り、そのリンク同士を繋げていきます。 (フレームを使用すればもっと簡単に作れますが、フレームページはSEOに適さないため、現在では敬遠されています。) |
||||||||||
@まず下のように3行2列のテーブルを作る。
|
<TABLE border="1"> <TBODY> <TR> <TD width="60" height="30">1</TD> <TD height="30">4</TD> </TR> <TR> <TD width="60" height="30">2</TD> <TD height="30">5</TD> </TR> <TR> <TD width="60" height="30">3</TD> <TD height="30">6</TD> </TR> </TBODY> </TABLE> |
|||||||||
A次に左の列のセルを全て結合(rowspan="3")し、下図のようなテーブルにする。
|
<TABLE border="1"> <TBODY> <TR> <TD width="60" height="30" rowspan="3">1+2+3</TD> <TD height="30">4</TD> </TR> <TR> <TD height="30">5</TD> </TR> <TR> <TD height="30">6</TD> </TR> </TBODY> </TABLE> |
|||||||||
B1+2+3セルと4セルの配色を同じにし5セルと6セルは違う色にする。 また、表の罫線を0ピクセルに(cellspacing="0")、枠を非表示にする。 これで4というアドレスを開いたときのページが完成。
|
<TABLE cellspacing="0"> <TBODY> <TR> <TD width="60" height="30" rowspan="3" bgcolor="#ffff66">1+2+3</TD> <TD height="30" bgcolor="#ffff66">4</TD> </TR> <TR> <TD height="30" bgcolor="#ff6666">5</TD> </TR> <TR> <TD height="30" bgcolor="#9999ff">6</TD> </TR> </TBODY> </TABLE> |
|||||||||
C同じようにして、5のアドレス、6のアドレスのテーブルを作成。(4のHTMLをコピーし配色を変えるだけでよい) 4、5、6、のアドレス帳をそれぞれ別のHTMLファイルとして保存する。(ここでは4のアドレス帳を保存したファイルを「4.html」とし、5と6は同様に「5.html」「6.html」と名づけて保存。)
|
5.html <TABLE cellspacing="0"> <TBODY> <TR> <TD width="60" height="30" rowspan="3" bgcolor="#ff6666">1+2+3</TD> <TD height="30" bgcolor="#ffff66">4</TD> </TR> <TR> <TD height="30" bgcolor="#ff6666">5</TD> </TR> <TR> <TD height="30" bgcolor="#9999ff">6</TD> </TR> </TBODY> </TABLE> 6.html <TABLE cellspacing="0"> <TBODY> <TR> <TD width="60" height="30" rowspan="3" bgcolor="#9999ff">1+2+3</TD> <TD height="30" bgcolor="#ffff66">4</TD> </TR> <TR> <TD height="30" bgcolor="#ff6666">5</TD> </TR> <TR> <TD height="30" bgcolor="#9999ff">6</TD> </TR> </TBODY> </TABLE> |
|||||||||
「4.html」を編集する。 5の文字に5.htmlへのリンク、6の文字に6.htmlへのリンクを張る。 同様に「5.html」の4の文字に4.htmlへのリンク、6の文字に6.htmlへのリンクを張る。 「6.html」の4の文字に4.htmlへのリンク、5の文字に5.htmlへのリンクを張る。
〈この回を参考にしよう!〉 HTMLの基本 テーブル使用法 |
<html> <title>4.html</title> <body> <TABLE cellspacing="0"> <TBODY> <TR> <TD width="60" height="30" rowspan="3" bgcolor="#ffff66">1+2+3</TD> <TD height="30" bgcolor="#ffff66">4</TD> </TR> <TR> <TD height="30" bgcolor="#ff6666"><A href="5.html">5</A></TD> </TR> <TR> <TD height="30" bgcolor="#9999ff"><A href="6.html">6</A></TD> </TR> </TBODY> </TABLE> </body> </html> |
|||||||||
→次へ |
プロの技!ウェブデザインの資料集 | |
チュートリアルーその1 | |
topics | |
HOME>アドレス帳
kon`sproduce All rights reserved |