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

Dreamweaverを実際に触ってみる

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

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

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

ウェブ分析レポート

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

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

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


ワイヤーフレームの作成

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

コンテンツを入れるページレイアウトの基本形を考えることを『ワイヤーフレームを作る』と言います。
ウェブサイトは先に枠組みをしっかりつくり、その後その枠にあわせてコンテンツを流し入れていくことで作成します。
事前の計画がいかにしっかり立てられているかによって、サイトの作りやすさが格段に違ってきます。
分析レポートを通じて、いろいろなウェブサイトをみて、自分のウェブサイトのワイヤーフレームやグラフィックデザイン等の計画を考えておきましょう。


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


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

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

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

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


わかりやすくまとまったブログ記事
https://blogs.adobe.com/creativestation/web-everything-you-need-to-know-about-wireframes-and-prototypes


ウェブサイトやブログを制作する時の手書きのワイヤーフレームのまとめ
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が使われる事が多い。

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


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

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


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

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

[ todo] スケッチ用のノートをつくろう
これからつくるウェブサイトについての資料やスケッチをまとめるためのノートもしくはクリアファイル一冊を準備しましょう。
参考にしたいウェブサイトがあればプリントアウトして貼ったり、なにかアイデアを思いついたら書き込んだりします。
また、何か図形を書き込むときにはなるべく定規を使って書きましょう。


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

・Illustratorで「スライス」する

基本設定

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


その他、アセット書き出しという機能があります。
以下の記事を閲覧し、試してみてください。
[資料]IllustratorからWeb用素材を一気に書き出す!アセットの収集と一括書き出し


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

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

その他書き出し方法もあわせて、以下の記事を閲覧し、試してみてください。
[資料]Photoshop CCの基本 第4回:Web用画像を書き出す4つの方法をマスター!


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

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



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

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



ヒント ボックス(div)の配置方法を指定する

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

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

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


clear : floatを解除する方法
{clear:left;}  左寄せをやめる
{clear:right;} 右寄せをやめる
{clear:both;} 左右どちらも寄せをやめる

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>

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

模範回答は以下になります。
>模範回答1(divを活用したレイアウト編)
>模範回答2(より正確なhtml5タグでレイアウト編)