webデザイン基礎
■HTMLとは
HyperText Markup Language: WWW上でハイパーテキスト文書を情報発信するための共通言語
Tim Berners-Lee がWWWを考案した際に開発した、 URI、 HTTP、 HTMLの三本柱のひとつ
見出し、段落、リストといった文書の構造 をマークアップし、簡単にリソース間のハイパーリンクを記述できる （W3Cより引用）
簡単に言うと 情報のレイアウトを 言語として表現するプログラムとも言える
文字の大きさや色 配置の方法
画像の大きさや色 配置の方法 画像が保存されている場所
ページ全体の色や タイトル
等を 数値や文字で表現するプログラムです。
たとえばこのテキストは以下のように表現されます。
また特殊なソフトを使うことなく シンプルテキストやメモ帳などのアプリケーションを用いて作成することも可能な言語です。
この授業では授業内でのみ参考として HTMLそのものの触り方は触れますが
DreamWeaverを使用する場合にはあまり気にすることなくビジュアルイメージ先行で考えていくことが可能となります。
引き続き言語部分に興味がある場合はwebで検索してみてください 情報はいくらでも出てくると思います。
■HTMLを使う場合のレイアウト
HTML単体での一般的なレイアウトはワードなどのワープロソフトに近く自由度はあまり高くない。
例えば
左揃え
中央揃え
右揃え
また
| 表の挿入 | ||
これも 揃え が効きます。
基本的に 簡単なページというものは
このような文字情報の 揃え 画像や表の 挿入・揃え 背景の色彩や、画像パターンの適用
この三点で出来ています。
※このテキストも同じく。
■DreamWeaverでのレイアウト
HTML単体の基本機能ではワープロソフトに順ずるレイアウトに制限されますが
DreamWeaverやGoliveなどのソフトでは
レイアウトグリッドという機能を用いて 1ピクセル単位でのレイアウトが可能となります。
この機能は
画面いっぱいに細かな表を作成して 表の中に挿入される情報のサイズに応じて
表の組み換えが自動で行われるというような機能です。
※詳細は授業中
■イラストレーターを用いてレイアウトを考える
HTMLでデザインをし、DreamWeaverを利用してさらに制限されることは
情報が重ねられないということです。
画像の上に文字が載る、等ということは（背景の設定で画像をのせる場合を除く）
HTMLを拡張した機能を利用しないと成立しません。
レイヤー機能など拡張した場合にはあるのですが 応用力が必要となるため
この授業では扱いません。（レイアウトの応用ではなくプログラム的な応用）
DreamWeaverではピクセル単位の微妙なレイアウトも可能となります。
イラストレーターで（フォトショップでも可）情報の重なり合いが無いように注意するという
点にだけ注意してレイアウトを考えてみてください。
見えないグリッドを自分なりに考えて情報を配置する 前の課題と共通するレイアウトの基礎です。
※ フォトショップではなくイラストレーターを指定したのは文字の扱いがイラストレーターのほうが考えやすく
また挙動がHTMLを用いた場合の挙動に近いため。
■課題 （授業中に進行+宿題）
次週以降ホームページの製作に入る
その前に自分のページについてデザインを事前に考える必要がある。
CAD応用の課題のデータの中から
エントランスゲート、アニメーション、ファンズワース、キューブ等等あるが
二つ以上セレクトし
A4サイズ程度を考えレイアウトをする。
その際 各ページごとに統一感のあるデザインとなるよう注意する。
※ ホームページをデザインする際には トップページのデザイン ページの移動 全体のページの構成のデザイン
など本を一冊作り上げるのに近い労力がかかる
今回求めるのは全体を通した 雰囲気 のデザインではなく
各ページごとの 情報量に応じた 情報のまとめ方について考えることを求める。
つまり演出はしなくても良いということ。 白紙に素直に情報を載せ、
何が大事でアピールしたい部分か、そのためにはグラフィック以外のもj期などの情報量はどれぐらいに制限するべきか等
綺麗な企画書を作るイメージで作ってください。
次週からの授業ではいったん 雰囲気を出す以前の段階でホームページとして全体を作る作業を行います。
ただしそこで終わりではなく 最終課題で再度完成度のあるホームページという形で再度課題となるため
自分なりの雰囲気の出し方、情報の見せ方、演出のアイデアなどは常に考えて貯めておいてください。
また次週では 宿題として 参考にしたいホームページを各自集めてくるという類の物を出す予定です。
時間に余裕がある人は今から探しておいてください。