Viewing Category » メディア表現演習I(web構築基礎)
19 9月 2009

文字コードという、文字を表示するためのルールは、それぞれのコードによって違う。以下はウェブサイトでよく使われる文字コードである。
かつて日本ではEUC-JPが主流だったが、現在はUTF-8が使われるようになってきている。
よって、この授業ではUTF-8を使用する。

19 9月 2009

基本タグ
html

1
<html> … </html><html> … </html>

xhtml全体の定義。このコードがxhtmlで書かれているということを記述している。
コード全体の最初と最後に記述。

18 9月 2009

ヘッダ
headタグ(ヘッダ)には、そのページの様々な属性を定義するためのタグを記述する。

1
2
<head>
</head><head>
</head>

という記述になる。
metaタグと文字コード
headタグの中にmetaタグを記述し、metaタグの属性として文字コードを記述する。文字コードは、文字を記述するためのルールだと理解すれば良い。
かつて日本ではEUC-JPが主流だったが、現在はUTF-8が使われるようになってきているので、この授業ではUTF-8を使用する。

1
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

他にも様々な文字コードがある。以下は代表的な例。
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-2022-JP” />
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS” />
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-JP” />
<head>要素の中で、文字コードの設定をする。テキストエディタの設定と合わせなければならない。

18 9月 2009

サーバとクライアント
webサイトを作る際に用いられるのがhtml文書(と画像など)で、そのhtml文書を読み込み、表示するのがブラウザである。ブラウザは、ネットワーク上にあるhtml文書だけでなく、ブラウザの起動しているPC内(ローカル環境という)のハードディスクにあるhtml文書も同じように表示できる。

クライアント環境にあるhtml文書は自分しか見ることができないが、FTPやSCPという方法によってサーバーへ文書をアップロードすれば、インターネット上に公開されたウェブサイトとなる。

18 9月 2009

htmlファイルのファイル名は通常のファイル名と違って様々な制約がある。
ファイル名の基本
必ず「半角英数字」を使用すること。
この時、日本語や全角英数字を使うとリンクが正しく繋がらない。
良い例:index.html、top.html、page.html
悪い例:インデックス.html(日本語)、w124.html(全角文字)
その他
文字と文字の間にスペースを入れてはいけない。
カンマ「,」、セミコロン「;」も使わないこと。
また、多くのウェブサーバは大文字と小文字を区別する。「Abc.html」と「abc.html」は別のファイルとして認識する。が、通常の使用の場合には小文字のみを使う方が無難。

18 9月 2009

1. 授業の目的

現在主流となっているxhtml+CSSを実習によって体験することによる、html文書の構造の理解
タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習

27 10月 2008

ボックスの概念
まずは、ボックスの概念を理解することが重要になります。Illustratorでグリッドを作ったように、スタイルシートではボックスを作って組み合わせながら全体のレイアウトを作っていくという特徴があります。以下は、余白であるmarginやpaddingといったプロパティが、ボックスのどの場所をさしているかを説明した図です。

margin, paddingの指定の仕方
marginやpaddingの指定は、慣れないとなかなか分かりづらいものなので、この機会に覚えておきましょう。

10 10月 2008

webサイトの制作において、画像の加工は必須になる。
写真などの画像は、補正を行なうことによって大きく見栄えが変化するので、自身の持っている画像やフリー素材サイトからダウンロードした画像など、適切な条件で撮影されていない写真は修正してから利用すること。
以下は、適正な色の画像と比べ修正が必要な画像
適正な画像

アンダー
画像が全体的に暗すぎて暗部がつぶれている。黒い部分は修正不可能。

オーバー
画像が全体的に明るすぎて明部がつぶれている。白い部分は修正不可能。

コントラストが高すぎる
コントラストが高すぎて固い感じの印象を受ける。

コントラストが低すぎる
コントラストが低すぎて眠い感じの印象を受ける。

10 10月 2008

webの場合、様々なデザインがあるが、レイアウトの構成要素は意外に少ない。
以下はその一例。
よくあるレイアウト1

よくあるレイアウト2

よくあるレイアウト3

ブログタイプ1

ブログタイプ2

ブログタイプ3

ビジュアル要素が強いレイアウト

webレイアウトの特性
webの特性
webはPhotoshopやIllustratorでのデザインとは異なり、最終的な完成品はwebサイトを見ているユーザの環境(たとえばWindowsかMacか、どのブラウザか、ウィンドウをどれくらいの大きさにしているか、など)によって大きく見栄えが変わる。またhtmlによって記述しなければいけない。webのレイアウトを考える際には、これらの特徴を理解してからプランを立てる必要がある。
サイトを見ている人のPcがどれくらいのモニタのサイズか、どれくらいウィンドウを拡げているか、によってサイトの見栄えは大きく変わってくる。現在のところ、1024×768 (XGA)サイズをレイアウトの基準とすることが多いと言われている。しかし、この値はコンピュータの性能とともに変化するので絶対的なものではない。画面にはOSのメニューやブラウザのメニューなども表示されるので、実際にレイアウトで使用できる範囲は画面サイズよりも小さくなる。以下はその表となっている。

グリッドによるレイアウト
IllustratorやPhotoshopのグリッドを使うと、簡単に統一感のとれたレイアウトを行なうことができる。また、スライスなどの機能を使ってボタンなどをgifに変換する時にも便利だ。
ここでは、Illustratorによってカラーカンプを作る際に使うグリッドを紹介する。
グリッドは以下のメニューから選択する。

表示されないときは、表示メニューからグリッドの表示を選び、さらにグリッドにスナップやポイントにスナップもONにしておく。このことによってオブジェクトを作成した時に勝手にグリッドに沿って生成してくれる。

さらに、グリッドの単位を変更する。Illustratorメニューの以下の項目を選ぶ。

ここでは、50pixel単位で分割数を10としてみよう。

このことによって、グリッドが5で割り切れる単位になるので、長さも数えやすなって作業が楽になる。
さらに上の表に従って、970 x 600の矩形の中でカラーカンプを作ってみよう。

10 10月 2008

○フリーの写真素材
http://www.yunphoto.net/
http://sozai-free.com/
○トップページの参考
flashなどで作られているのもありますが、あくまでもデザインの印象が強いものを集めています。同じようなものを作れという事ではありません。
全体的に見やすく、レイアウトや写真の使い方が参考になるサイト
http://www.potterybarn.com/
http://www.bergdorfgoodman.com/
http://www.lupicia.com/
http://www.afternoon-tea.net/main.html
http://www.francfranc.com/
デザインが個性的
http://www.choppingblock.com/
http://www.todsgroup.com/
http://www.nike.jp/front/index.asp
http://club.lego.com/eng/
http://www.benkaufman.com/
http://ayakaito.com/log/
http://howardrevis.com/

 Page 1 of 4  1  2  3  4 »
Stroom designed by Credit Cards In conjunction with Web Hosting Reseller , Dream Interpretation Guide , Best Website Hosting.