HOME>テンプレート集
kon`s produce webdesign lecture! | |
<<|テンプレート集|ユーザビリティ|HTMLをこえて| |
テンプレート集 | ||||||||||||||||||||||||||||||||||
今までに紹介したデザイン素材をテンプレートとして紹介します。 各素材の右にHTMLタグがありますのでコピーして使ってください。自分なりにいろいろ変えてみて使用すると良いと思います |
||||||||||||||||||||||||||||||||||
■3d-table
|
<TABLE width="219" height="224" cellspacing="0"> <TBODY> <TR> <TD height="25" colspan="3" width="100"></TD> <TD bgcolor="#ffffff" height="25" colspan="4" align="center"><A href="page.3"><I>page.3</I></A></TD> </TR> <TR> <TD height="27" colspan="2"></TD> <TD bgcolor="#e3e3e3" colspan="4" height="27" align="center"><I><A href="page.2">page.2</A></I></TD> <TD bgcolor="#ffffff" height="27" width="27" rowspan="3"></TD> </TR> <TR> <TD width="24" height="28"></TD> <TD bgcolor="#d4d4d4" colspan="4" height="28" align="center"> <A href="page.1"><I>page.1</I></A></TD> <TD bgcolor="#e3e3e3" height="28" width="27" rowspan="3"></TD> </TR> <TR> <TD bgcolor="#000000" rowspan="3" width="24" height="80"></TD> <TD bgcolor="#ffffff" rowspan="3" colspan="3" height="80" width="100"><B>welcome!<BR> my homepage</B></TD> <TD bgcolor="#d4d4d4" rowspan="3" height="80" width="18"></TD> </TR> <TR> <TD bgcolor="#ffffcc" width="27" rowspan="3"></TD> </TR> <TR> <TD bgcolor="#ffffcc" width="27" rowspan="2"></TD> </TR> <TR> <TD bgcolor="#ffffff" width="24" height="36"></TD> <TD bgcolor="#000000" colspan="3" height="36" width="100"></TD> <TD height="36" width="18"></TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
3Dテーブル 3Dテーブルを利用したメニュー。各ページへのリンクなどをカスタマイズして使ってください。 <この回を参考にしよう!> テーブル使用法 3Dテーブル |
||||||||||||||||||||||||||||||||||
■3d-text ようこそ わたしの ホームページへ ごゆっくり ご覧下さい |
<FONT size="+4" color="#000000"><B>ようこそ</B></FONT><BR> <FONT size="+3" color="#888800">わたしの</FONT> <FONT size="+2" color="#e8e800"><BR> ホームページへ</FONT><BR> <FONT size="+1" color="#ffff62">ごゆっくり</FONT><BR> <FONT size="-1" color="#ffffa2"> ご覧下さい</FONT> |
|||||||||||||||||||||||||||||||||
3Dテキストを使った紹介文。 フォントカラーは背景色に近い色を一番下の文字に、そこから上の文字へとグラデーションしていくと良いです。 <この回を参考にしよう> フォントをロゴに! 3Dテキスト |
||||||||||||||||||||||||||||||||||
■3d-doram
|
<TABLE cellspacing="0"> <TBODY> <TR> <TD bgcolor="#e7e0fe" height="21" colspan="2"><A href="home">home</A></TD> </TR> <TR> <TD bgcolor="#bca9fc" height="20" colspan="2"><A href="page1">page1</A></TD> </TR> <TR> <TD bgcolor="#a58cfb" height="25" colspan="2"><A href="page2">page2</A></TD> </TR> <TR> <TD bgcolor="#8361fa" height="21" colspan="2"><A href="page3">page3</A></TD> </TR> <TR> <TD bgcolor="#6135f9" height="22" colspan="2"><A href="page4">page4</A></TD> </TR> <TR> <TD bgcolor="#3c07ef" height="23" colspan="2"><A href="page5">page5</A></TD> </TR> <TR> <TD bgcolor="#3005c0" height="22" colspan="2"><A href="page6">page6</A></TD> </TR> <TR> <TD bgcolor="#250495" height="25" colspan="2"><A href="page7">page7</A></TD> </TR> <TR> <TD bgcolor="#0e0138" height="24" width="72"><A href="before">←</A></TD> <TD bgcolor="#0e0138" height="24" width="71" align="right"><A href="next">→</A></TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
グラデーションメニュー(3Dドラム) ページ1〜7とホームへのリンク、左の矢印は前のページへ。右の矢印は次のページへのリンクになっている。 <この回を参考にしよう> グラデーション 3Dドラム |
||||||||||||||||||||||||||||||||||
■adressbook
|
<TABLE width="228" height="235" cellspacing="0"
cellpadding="10"> <TBODY> <TR> <TD rowspan="6" bgcolor="#ffffff" valign="top" height="211" width="163"><BR> <FONT color="#000000"><B><FONT size="+2" face="@HGS創英角ゴシックUB">page A<BR> </FONT></B></FONT> <HR> <HR> <HR> <HR> <HR> <HR> <HR> <HR> <HR> <FONT color="#000000"><B><FONT size="+1" face="@HGS創英角ゴシックUB"></FONT></B><BR> </FONT></TD> <TD bgcolor="#ffffff" align="center" width="7">a</TD> </TR> <TR> <TD bgcolor="#ffff33" align="center" width="7"><A href="b.html">b</A></TD> </TR> <TR> <TD bgcolor="#ffcc33" align="center" width="7"><A href="c.html">c</A></TD> </TR> <TR> <TD bgcolor="#fddcce" align="center" width="7">d</TD> </TR> <TR> <TD bgcolor="#fdcee6" align="center" width="7">e</TD> </TR> <TR> <TD bgcolor="#f8cdfe" align="center" width="7">f</TD> </TR> </TBODY> </TABLE> |
|||||||||||||||||||||||||||||||||
アドレス帳メニュー アドレス帳のようにa,b,cのリンクに移動すると各ページにうつる。各ページのHTMLはa,b,cのリンク先にある。 <この回を参考にしよう> アドレス帳 |
||||||||||||||||||||||||||||||||||
→次へ |
プロの技!ウェブデザインの資料集 | |
チュートリアルーその1 | |
topics | |
HOME>テンプレート集
kon`sproduce All rights reserved |