HOME>テンプレート集

kon`s produce webdesign lecture!
<<|テンプレート集|ユーザビリティHTMLをこえて
テンプレート集




今までに紹介したデザイン素材をテンプレートとして紹介します。

各素材の右にHTMLタグがありますのでコピーして使ってください。自分なりにいろいろ変えてみて使用すると良いと思います


■3d-table

page.3
page.2
  page.1
welcome!
my homepage
<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

home
page1
page2
page3
page4
page5
page6
page7
<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


page B










a
b
c
d
e
f
<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 B<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 href="a.html">a</A></TD>
</TR>
<TR>
<TD bgcolor="#ffff33" align="center" width="7">b</TD>
</TR>
<TR>
<TD bgcolor="#ffcc33" align="center" width="7"><A href="b.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
お問い合わせ





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