Yasushi Noguchi Class
class resume organized by Y.Noguchi
サイトマップは、特に決まったフォーマットはないが、一般的には以下のようなツリー構造で作る。
一番気をつけなければいけない点は、「リンクの関係が分かりやすい」ということ。
通常、マップの見やすさを優先させるため、無意味に装飾的にはしない。書体もゴシック体などの一般的なものを使おう。
また、Adobe Illustratorなどを使用する場合には、グリッド機能を利用して、より効率的にマップを描くこと。
テンプレート
学生参考作品
以下のサンプルは、あくまで参考程度にとどめること。同じことをやらないように。極力、自己紹介をする際の自分の独自性を考えてサイトマップを作るように。
xhtmlでのコメントは以下の通り。
コードが長くなると煩雑になるので、まめにコメントをつけておく癖をつけよう。
<!– この部分がコメントです –>
グラフィックや写真などの画像はウェブにおいて重要な要素の一つである。ただし文字に比べるとデータ量が格段に多いので、webの場合は圧縮方法をうまく使い分けてできるだけデータ量を少なくする必要がある。Illustrator, Photoshopをベースに、さまざまな画像の圧縮方法と、画面構成イメージからの素材画像切り出しについてを中心に説明する。
ウェブで用いられる画像形式
ウェブでは、広く使われている形式としてGIFとJPEG、これから本格的な普及が見込まれる形式として PNG や SVG 形式がある。それぞれの形式は異なる圧縮方式を用いており、画像の種類によって向き不向きがある。
GIF
拡張子は .gif。扱える色数は 256色までで、透明色を1色指定することができる。ほとんどのブラウザがサポートしている。ベタ面の再現に向いているので、ロゴやボタン、アイコンなどのインタフェイスを構成するパーツによく使われている。
JPEG
拡張子は .jpgあるいは .jpeg。色数は約1677万色で、ほとんどのブラウザがサポートしている。写真などのように色数が多くグラデーションが多い画像に向いている。
PNG
拡張子は .png。GIFに変わる画像形式として開発されたもので、約280兆色まで再現でき、同じ画質でもGIFより小さいサイズまで圧縮できる。αチャンネルを持ち、半透明の画像をつくることができる。比較的新しいバージョンのブラウザでサポートされている。
DOCTYPE宣言とは、このxhtml文章がどのような形式で書かれているかを定義する部分。大きく分けてxhtmlとhtmlがあるが、今回はxhtmlを使用する。
XHTMLの場合
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
過渡的な規格で、「非推奨タグ」と言われるタグも利用できる。実際にはこのdoctype宣言が現時点では一番よく使われているので、今回は、このタグを使用する。
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
厳格に規格に沿ったxhtml。
XHTML 1.0 Frameset
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
フレームが使える。
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
より厳格なxhtmlの規格。<font> や <center> など、HTML4.01 で deprecated と指定されていた要素や属性が完全に廃止されている。現在はまださほど普及していない。
XHTML Basic 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML …
1. 授業の目的
現在主流となっているxhtml+CSSを実習によって体験することによる、html文書の構造の理解
タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習
