メディアデザイン演習4β
04 Dreamweaver基礎編

Dreamweaverを実際に触ってみる

前回の授業のふりかえり
*DIVの操作
 floatを使った左右への<div>の配置 
*サイトの作成 サイトの概念

使いこなしたいウインドウ:
プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ

■まず確認
自分の名前のついた"サイト"になっているかを確認しましょう。
現在、数名でそのマシンを共有しているので、他の人のサイトに間違って保存しない様に気をつけましょう。

ウェブ分析レポート

みなさんには、製作者の視線を持ってウェブサイトを分析的に見てレポートしてほしいと思います。
来週までにまず最低3つ、ウェブサイトを紹介して下さい。
以降、年内の授業期間中はいつでも何枚でも提出して下さい。

ープリントを参照してください
このプリントと同じフォーマットでレポートを提出してもらいます。
イラストレータデータをダウンロードして、文字を入力してください 。

●ここをクリックしてダウンロードする●
Adobe Illustrator CSデータ 610KB

<div>を使ったレイアウト float と clear

・floatは、指定された部分が、余白が開いているぶんだけ左右(leftもしくはright)にひっついていく
・余白がなくなったら次の行の左上端を基準にひっついていく

レイアウトの技法
まずは全体を包みこむdivを作り、サイズを決める(PC画面用だと900〜1200pxくらいが最近よくみるウェブサイトのサイズ。ほかにも現場ではタブレット用やスマートフォン用などを考える必要がある)
そのdivの中に、要素を入れこんていってレイアウトする。

 

★ポイント
インライン要素とブロック要素
divタグ …… ブロックタイプ(前後に改行が入ります)
spanタグ …… インラインタイプ(前後に改行が入りません)

divタグはひとつのエリアをまとめて操作する場合に使用し、spanタグは文章中の一部を操作する場合に使用する、といった感じで使い分けると良いでしょう。
もしインライン要素(pやspanなど)をブロックのように扱いたい場合は、{display:block;}というデザイン指示を追加すると良い。


■float (上下左右の位置指定)
 float:left; 左寄せ
 float:right;  右寄せ

一度、floatをやめてあたらしく左上端からレイアウトを始めたい場合
・clearを使う

{clear:left;}  左寄せをやめる
{clear:right;} 右寄せをやめる
{clear:both;} 左右どちらも寄せをやめる

*今後やる事
CSSで装飾をつけていったり、ウェブ用の画像の書き出し方を復習して貼付けていったりすることで、見た目の向上を目指す

これに、内容(コンテンツ:文章や写真や図版)などが組み合わされば、ウェブサイトは作れるはず、ですよね!




どんなウェブサイトにするか

制作内容は自由にします。
ただし、

・全世界に公開しても問題の無い内容にすること
・ブログ(日記的)などの雑多なコンテンツの集積ではなく、一定のテーマや対象が決まったもののほうが好ましい
・自分ならではの着眼点や切り口を持って作成すること。(もうすでにあるものや自分が作らなくてもいいものではないよう考える)
・素材や文章は自分で責任を持って作るもしくは依頼して集める事
 
・トップページ以下、複数ページを行き来するつくりにすること


考えてきてもらったウェブサイトに関して、来週からワイヤーフレームづくりとそのコーディングを行って行きたいと思います。
見た目に関してもいろいろと考えたり調査したりしてくること。

 



ワイヤーフレームの作成

ウェブサイトを作るときに、、、

1 手書きのワイヤーフレームを書く(配置とサイズをしっかり決める)
2 IllustratorやPhotoshop、もしくはFireworksというアプリケーションで内容をデザインして行く
3 画像をパーツ毎にウェブ用に書き出して保存する
4 Dreamweaver等を使ってレイアウトコーディングしていく


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

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

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

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


ウェブサイトやブログを制作する時の手書きのワイヤーフレームのまとめ
http://coliss.com/articles/build-websites/operation/work/wireframe-sketches-collection.html



- グリッドデザインをしよう
http://photoshopvip.net/archives/14323

見えない補助線を使って整列させて行く

- 画面サイズについて
現状、横幅960px~1024pxを使う事が多い。

資料:もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ〔日本では1366×768〕

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

 
 
 

2・詳細のグラフィックデザインを行っていく

道具は、IllustratorやPhotoshop、もしくはFireworksというアプリケーションが使われる事が多い。

使い分けーそれぞれのアプリケーションの得意なこと
 Illustrator: ベクター画像でつくる複雑な図形 文字の加工 など
 Photoshop: 複数画像の合成、細かい切り抜き など
 Fireworks: 同じデザインを使い回したページごとのデザインの保持 など


連携できる:
各自アプリケーションで作った物をコピーアンドペーストなどで移動できる

例:Illustratorで作ったタイトルまわりの看板デザインをFireworksにコピーアンドペーストする、など


[
ウェブ用画像のPOINT]
・色はRGB

単位はピクセル
・画像形式 GIF・JPEG・PNG http://www.htmq.com/gazo/



関連アプリケーション1
IllustratorによるデザインとWEB用書き出し

・Illustratorで「スライス」する

基本設定

① 表示形式を「ピクセルプレビュー」に(新規ドキュメント設定時)
②「ピクセルグリッドに整合」にチェック
(変形ウインドウのチェックボックス)
③「ピクセルにスナップ」にチェック
(ツールバー/表示から)
④ アートボード定規の基準点を正確に
(定規ツールやグリッド表示を活用する)


Learn Illustrator CS6 - スライスとWeb用画像の保存­˜ on Adobe TV tv.adobe.com
http://tv.adobe.com/jp/watch/learn-illustrator-cs6-jp/14718/




関連アプリケーション2
PhotoshopによるデザインとWEB用書き出し 、Fireworks

・Photoshopで「スライス」する

・画像をweb用に保存する

・スライスツールを使う
[資料] スライスツールをもっと便利に使って、効率よくWeb用保存をする


その他、レイヤーごとに一枚のウェブ用画像として書き出す
 |「ファイル」>スクリプト>レイヤーをファイルへ書き出し
という機能があります。

[資料]レイヤー別にファイルを書き出す方法



・Fireworksでボタンを作ってみる

 ベクトルツール「角丸長方形」で視覚を描き、色を選択し、 
 フィルタから ベベル ドロップシャドウ などを選択し立体的にしてみる
 文字ツールを使って、上にボタン用の文字をつけてみる
 ウェブ用に保存する

[資料]ボタンシンボルの作成 http://help.adobe.com/ja_JP/fireworks/cs/using/WS3f28b00cc50711d9-16018b4b133a47d3388-8000.html