テンプレートとはそもそも何か？

テンプレートとは？ WEB上 Dreamweaver上

テンプレートとは？　←　クリックでwikipedia[webテンプレート]へジャンプ

Webテンプレート（ウェブテンプレート）は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。

有名企業のサイトを参考に見てみよう

無印良品

https://www.muji.com/jp/

TOPページはビジュアル優先に

それぞれのカテゴリーのぺージの

テンプレートを統一

TAB

 http://www.tokyoartbeat.com

TOPページと各カテゴリはそれぞれの特別デザインに

それぞれのイベントのくわしいぺージは

テンプレートを統一

ユニクロ

http://www.uniqlo.com/jp/

TOPページとカテゴリーページのテンプレートが近い

headerとfooterの間に商品の詳細ページへのリンク

メガメニューを取り入れることによってかなり細かく分類されていても

一気に特定のページへ飛ぶことができる仕様になっている。

自分のサイトのトップページになるindex.html

無料配布されているテンプレートを紹介しているサイトのものを使用しても良いし

DreamWeaverの新規で作成されるテンプレートを使って作成しても良い

無料配布されているテンプレートを紹介しているサイト

http://f-tpl.com/sample/tpl_078/

http://f-tpl.com/sample/tpl_079/

http://f-tpl.com/sample/tpl_071/

http://f-tpl.com/sample/tpl_067/

http://f-tpl.com/sample/tpl_043/

http://f-tpl.com/sample/tpl_003/

http://tempnate.com/tinyd5+index.htm#stylish

http://tempnate.com/tinyd5+index.htm#aqua

http://tempnate.com/tinyd5+index.htm#liquid

http://tempnate.com/tinyd5+index.htm#basic

http://tempnate.com/smartphone/

↑
このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に

<script type="text/javascript" src="userAgent.js"></script>

と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照：http://www.html5-memo.com/css3/pc_bunki/

<<<<<本日の作業>>>>> 
自分のサイトのレイアウトを

どのパターンにするのか考えましょう

Aパターン：
上記のテンプレートのリンクから、自分のサイトの計画に合うものを使って作成を始める。

Bパターン：

自分のサイトの計画しているレイアウトが、上記のテンプレートのリンクにはない場合はDreamweaverから近いテンプレートを使って作成する


動くメニューの種類あれこれ
↑メニューと一言で言っても色々な種類があります。
メニューの種類によって印象が大きく変わる場合もあります。
自分のサイトの予定する世界観をうまく引き出し、
かつ、見る人が全貌を把握しやすいメニューを考えてみましょう

メガメニュー・メガドロップメニュー

つまり、
誰が見てもデザインが崩れないためには
テンプレートは必要である。