HOME>テンプレート集

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




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

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


■3d-table

page.3
page.2
  page.1
welcome!
my homepage

HTMLソース

3Dテーブル
3Dテーブルを利用したメニュー。各ページへのリンクなどをカスタマイズして使ってください。

<この回を参考にしよう!>
テーブル使用法
3Dテーブル

■3d-text

ようこそ
  わたしの
  
ホームページへ
        ごゆっくり
             ご覧下さい



HTMLソース

3Dテキストを使った紹介文。
フォントカラーは背景色に近い色を一番下の文字に、そこから上の文字へとグラデーションしていくと良いです。

<この回を参考にしよう>
フォントをロゴに!
3Dテキスト

■3d-doram

home
page1
page2
page3
page4
page5
page6
page7


HTMLソース

グラデーションメニュー(3Dドラム)
ページ1〜7とホームへのリンク、左の矢印は前のページへ。右の矢印は次のページへのリンクになっている。

<この回を参考にしよう>
グラデーション
3Dドラム

■adressbook


Adress
a
b
c
d
e
f


HTMLソース

アドレス帳メニュー
アドレス帳のようにa,b,cのリンクに移動すると各ページにうつる。各ページのHTMLはa,b,cのリンク先にある。

<この回を参考にしよう>
アドレス帳

→次へ
プロの技!ウェブデザインの資料集
特集ページの構成
FANCL「フェナティおためしセット」



キャンペーン、特集ページ等はコンテンツページのデザインとは違い、特集内容を大々的に強調する事ができる。

このページの場合も中央上部にイメージを配置することで商品を強調している。

また、商品の清潔感を印象づけるように寒色系の配色を使っている。

特に注目すべきなのは画面最上部、ロゴの横のナビゲーション。
矢印型のナビゲーションになっていて手順が一目で分かるようになっている。
手順を説明する必要がなく便利。



チュートリアルー第25回
テンプレートで効率的に。


テンプレートは、あらかじめデザインされたHTMLファイル等のことです。
これを使えば、デザインを1から考えることなく、すばやくページを作ることができます。

ホームページで使用できるテンプレートのサイトはたくさんあるので探してみると良いでしょう。(テンプレートではないHTMLファイルを勝手に使うのはマナー違反です。)

ではこのページの左にあるテンプレートを使ってみましょう。

@チュートリアル・サンプルページにHTMLファイルを埋め込みます。→3DtableのテンプレートのHTMLファイルをコピーし、サンプルページのHTML内に貼り付けます。

Aテンプレート部分をカスタマイズします。→題名・リンクの変更。




topics
nodata...


HOME>テンプレート集

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





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