HOME＞アドレス帳

kon`s produce webdesign lecture!
<<｜アドレス帳｜テンプレート集｜ユーザビリティ｜>>
　　　
アドレス帳



ーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー		 a
b
c
d
e
f

■adress-book
ホームページ作成全般でよく使われる。
システム手帳のように目次とページが一体化していて、目次のリンクを押すとページが変わる。

<frame>タグを使った方法が一般的だったが、SEO対策のために<table>タグが使われるようになる。
アドレス帳風リンク。
アドレス帳をめくる様な操作でページが変わるようにする。
メニュー(目次等)によく使われます。

ここではテーブルタグを使用して、同じ形をした表を何枚か作り、そのリンク同士を繋げていきます。

(フレームを使用すればもっと簡単に作れますが、フレームページはSEOに適さないため、現在では敬遠されています。)



①まず下のように３行２列のテーブルを作る。
1 4
2 5
3 6
1,2,3セルがページ部分、4，5，6が目次部分になります。



<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>



②次に左の列のセルを全て結合(rowspan="3")し、下図のようなテーブルにする。
1+2+3 4
5
6
セルの縦結合：<TD rowspan="結合するセル数">



<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>



③1+2+3セルと４セルの配色を同じにし５セルと６セルは違う色にする。

また、表の罫線を0ピクセルに(cellspacing="0")、枠を非表示にする。

これで４というアドレスを開いたときのページが完成。
1+2+3 4
5
6
セルの背景設定：<TD bgcolor="色番号">セル</TD>




<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>



④同じようにして、５のアドレス、６のアドレスのテーブルを作成。(４のＨＴＭＬをコピーし配色を変えるだけでよい)

　４、５、６、のアドレス帳をそれぞれ別のＨＴＭＬファイルとして保存する。(ここでは４のアドレス帳を保存したファイルを「4.html」とし、５と６は同様に「5.html」「6.html」と名づけて保存。)
1+2+3 4
5
6

1+2+3 4
5
6



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.htmlへのリンク、６の文字に6.htmlへのリンクを張る。
「6.html」の４の文字に4.htmlへのリンク、５の文字に5.htmlへのリンクを張る。
1+2+3 4
5
6

〈この回を参考にしよう！〉
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>
→次へ
プロの技！ウェブデザインの資料集
オリジナリティを出す。
外貨プラス


ウェブデザインをするなら他のサイトにはないオリジナルのアイデアは訪問者の目をひく武器になる。
このサイトの場合は商品名の「プラス＝＋」の記号がいたるところに見られる。
このようにサイト独自の記号・ロゴを訪問者にイメージ付ける事ができればデザインは成功したと言える。

ちなみにこのサイトではロゴやナビゲーション、その他のエレメンツが大きめに作られていてアンバランスになっている。この点は残念。
チュートリアルー第24回
新しいウェブデザインを考えよう。


さて、中級編もこの回で終わりです。
上級編ではウェブデザインを使いこなせる人のためのツールを紹介しているので、事実上のレクチャーはここまでとなります。

今回は左の「アドレス帳」をもとにして今までよりちょっと複雑なデザインに挑戦してみましょう。

百聞は一見にしかず。
まずは出来上がりを見てください。

先ほどのページとは趣きがだいぶ変わりました。
具体的には画面中央「whats...」の部分が変わっていて、リンクを押すと文章だけが変わる「アドレス帳」になっています。

また「３Dドラム」の回で作った円柱が曲がった形ができています。

では今までのまとめの意味も含めて、実際にこのページを作ってみて下さい。(見たページを再現できるかどうかも重要なテクニックです。)

<ヒント>次の４つのHTMLファイルを使います。
ページA
ページB
ページC
ページD


どうですか？
①まず「曲がった円柱を作ります。
前回作った円柱のセルを下に４行増やします。→それぞれセルごとに背景を設定。

②次に下にもう一つ行を増やし、ここにはページAの説明文をいれます。

③ページAを３つコピーし、それぞれページB、C、Dとします。→B、C、Dの説明文だけを入れ替える。

④ページB,C,Dの説明文のセルの背景とリンクのセルの背景を同一に。→ページA,B,C,Dをリンクで結ぶ。
topics
nodata...

HOME＞アドレス帳

kon`sproduce All rights reserved
お問い合わせ





100MB無料ホームページ│ 可愛いサーバロリポップClick Here!