明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14

Presentation on theme: "明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14"— Presentation transcript:

1 明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
デザインカンプ 明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14

2 デザインカンプとは 以前に好みの配色を記録したエクセルファイルを開き、デザインカンプを作成する。
"デザインカンプとは、htmlやCSSでコーディングする前に、サイト制作を依頼した顧客にデザイン確認のために提示するもの。顧客が気に入らなければ作り直しとなる。 サンプルで確認

3 レイアウトの作成 10列選択し、列幅11.63とする。これでWEBページの実際の横幅980pxとなる レイアウトを意識してデザインする
ヘッダ メインイメージ グローバルナビゲーション コンテナ(コンテンツ・サイドバーを含む） コンテンツ 左サイドバー（今月のおすすめを後に入れる） 右サイドバー（広告を後に入れる） フッタ 　　の各領域を意識してデザインしていく

4 画像の収集とデザインカンプ1 headder Main_image Global_navi Container Footer 広告
エクセルで、右のレイアウトに従って、罫線でなく図形の四角形で枠を作る（高さと幅は自由でよい） Container　は中心部分となるので高さを最も高くする Divのid名(#headderなど）は覚えられれば入れなくてもよい。 ここでは#all_wrapperは不要 枠の上に画像と文字を配置する。画像は縦横比が変わらないように気を付けて操作する。 今月のおすすめ　と　広告部分は　スペースだけ確保しておく（大きさは自由で良い） 自分のサイトで使用したい画像のきれいなものを収集して専用フォルダ（フォルダの場所はどこでもよい）に入れる。(右クリックー名前を付けて保存。直リンク（＝直接コピペ）不可。 Container 　　広告 headder Main_image Global_navi Footer 　今月のお勧め

5 画像の扱い 画像の検索と保存 複数画像のサイズを合わせる 「買い物かごに入れる」、「買い物かごを見る」 は好きな画像を探して入れる
Webから画像をもってくるときは右クリックー画像の保存 エクセルに画像を入れるには、挿入ー画像　で保存したファイルを選ぶ 複数画像のサイズを合わせる 画像をクリックし、図ツールー書式で　縦横比を変えないように注意してサイズを見ながら高さを合わせる。 幅はトリミングしてサイズ調整する。 画像をほんの少し動かしたいときには矢印キーを使用するとよい 「買い物かごに入れる」、「買い物かごを見る」　は好きな画像を探して入れる

6 購入商品詳細ページについて 購入できる商品は2点とする 1商品につき1ページ、計2ページ作成する
解説部分は文字入力ではなく、ネット上の解説ページをスクリーンショットで画像で貼り付ける。 文字入力すると、HTML上でのコントロールが難しくなるため。

7 買い物かごについて Headder部分の買い物かごは後日作成するので今回は作成しない 商品詳細ページの以下の部分は後日作成するので不要

8 配色：色はRGBに変換 HUE/360で選定した配色は16進数表記になっている。
16進数コードを入力し、RGBに変換。エクセルでのカラーパレットの　その他の色ーRGB　とし、RGB各色のコードを入力して対照表を作成しておく。 デザインカンプ作成時に色を使う場合にはHUE/360で作成した配色を利用する。 無彩色（白・黒・グレー）以外は、無計画に色を使用しない。

9 仕上げ エクセルの枠線が出ている部分は、セルを白く塗りつぶす DivのID名と枠線を取る