メディアデザイン演習3β
08 ウェブサイトを作ろう3

実製作に向けて

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

今週は、自分のウェブマガジンのためのフレームCSSをつくるための最終確認作業です。
また、制作物ヒアリングも平行して行いますので、まだ何を作るか迷っている人は率先して声をかけて下さい。

準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。


[資料] [要チェックのブログ]
コリス - サイト制作に関する最新の情報をご紹介

http://coliss.com/

理解度テスト:作ってみよう

mi で新規書類を作成し、 wiretest.htmlという名前で保存してhtmlファイルを一つつくります。 これまで作ってきたhtmlファイルから必要な情報を抜き出して使いながら、以下のワイヤーフレームを実現してください。
クラスやID名は自由です。また、CSSファイルに関しては、外部CSSにしてリンクさせてください。CSS名はwiretest.cssとしてください。図の数字の単位はpxです。



ヒント:
水色の文字:マージン(外側の余白)幅の指定
オレンジの文字:パディング(内側の余白)の指定

黄色のエリア下にある水色の箱の部分は同じものが繰り返されているのに注目してください。



復習 ボックス(div)の配置方法を指定する

<div>
この部分が<br / >
ひとつの面的範囲として<br / >
扱われます。
</div>

floatについて
float フロート、というスタイルを使います。
フロートとは「浮かぶ」という意味です。 :コーヒーフロート

clear : floatを解除する方法

HTML部分
<div class="menu">ひとつめ</div>
<div class="contents">ふたつめ</div>
<div class="footer">みっつめ</div>

CSS部分
div.menu, div.contents { float : left; }
div.footer {clear : left; }



DIVなどのタグを入れ子状態で配置する

<div>
 <div><a href="#">文字や画像</a></div>
 <div>
   <div><img src="#" /></div>
 </div>
</div>

  タグを挟み込んでいくことでいろんな指定を反映させることができる

 


マガジン実製作 レイアウト編

実際に自分が制作しようとおもっているウェブサイトについて:
ワーヤーフレームから、実際の数字などを決定し、HTML+CSSで実際のフレーム(枠)づくりをやってみましょう。
前回から行っているdivを活用してみてください。

どうしてもできない、もしくは、やり方が分からないなどの問題が発生した場合は、どんどん質問してください。
数値に関しては、キリのいい数字にするのがよいでしょう。




1・ワイヤーフレームについて

- ワイヤーフレームって?
内容をどのように配置すれば見ている人に伝わりやすいかを考えて作った画面構成図

例)ワイヤーフレームと完成したウェブページデザインが見られる http://www.wireframeshowcase.com/

・大きさ、場所、順番などをしっかり決める
・色味(テーマカラー)なども検討する
・いくつかページレイアウトのバリエーションがある場合は、全ページの形ぶんつくる

- グリッドデザインをしよう http://photoshopvip.net/archives/14323
見えない補助線を使って整列させて行く

- 画面サイズについて
現状、横幅960px~1024pxを使う事が多い。
資料:もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ〔日本では1366×768〕

スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。
画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。


2・詳細のグラフィックデザインを行っていく
道具は、IllustratorやPhotoshop、もしくはFireworksというアプリケーションが使われる事が多い。

[ウェブ用画像のPOINT]
・色はRGB
・単位はピクセル
・画像形式 GIF・JPEG・PNG

 

来週の内容

引き続き要素と属性の紹介
来週もマガジン実製作編レイアウト編です。
HTMLの辞書/参考書を手に入れておきましょう。
わからない事は早めに質問して下さい。