デザインの学校 ウェブデザイン応用編第4回

2007.4.28.sat.
第4回

今回は前回の課題の好評と、サイト制作を行いました。
◎課題の好評
皆さんステキに作ってありました。
課題のサイトの中身を考慮して、更新しやすくしてあるもの。
ターゲットを女性に絞った、女性が好みそうなかわいいデザインのもの。
今回の課題のサイトは、毎月発行されるフリーペーパーのサイトでしたので、
やはり毎月表紙の画像を差し替える事が可能であったりするのはいいですよね!
そしてやはり女性が興味をしめす、女性らしいデザインが好ましいです。
皆さんとても考えて作ってあったと思います。
◎実際のサイト制作の流れ
課題もふまえて、先生から実際のサイト制作の流れを話していただきました。
提案段階で、クライアントの話を聞いて 大きくデザインを完成する前に確認するスケルトンを作ることが大事です。
それを元に細かいデザインを詰めていきましょう。
リンクにもいくつか種類があり、それを上手に使いましょう。
目的につくための手段が多いと使いやすいです。ありすぎると混乱しますので、うまく使いましょう。
今回紹介していただいたのが、
・パンくずリスト
 トップページ > ○○○ページ > ○○○
と、今自分の居場所が分かり易いものです。
ページの頭についているのをよく見ますよね。
・補助リンク
 ←前のページへ  次のページへ→  ↑ページの先頭へ戻る
と、ページを読み終わった下の部分についている事が多いです。
・フッターのナビ(水平リンク)
 →関連グッズ
 →○○○○○
 →○○○○○

お薦めのページや、つながりのページへ飛ぶようになっていて、サイトが見やすく便利です。
◎サイト制作
今回はチュスマのトップページを作りました。
1.まず簡単なhtmlを作ります。 DreamWeaver
5つのテーブルを作り、それぞれ head navi contents footnavi foot とします。
navi には先ほど勉強したパンくずリストを入れます。
footnavi にはメインのナビゲーションと同じ内容で
| ホーム | 新着 | ガイド | ヘルプ | 設置場所 | コンタクト | プライバシーポリシー |
という形でリンクをいれます。
この時、仮のリンクという事でを入れておきましょう。
foot  には (c)2007 ○○○○○○○○ とコピーライトを入れます。
なんとなくサイトの形が見えた所で本格的に製作開始です。
contents 部分を作っていきます。
2.素材の画像処理 FireWorks
contents の部分で使う画像をダウンロードして画像の処理をします。
サイズ変更をして写真をぼかしてなじませます。
画像を触るときは、元の画像をレイヤーで残しておくと、後から編集するとき等便利です。
3.タイトルの制作 FireWorks
一番のメインとなるタイトルを作ります。
文字詰めや整列のしかた、色などによって、みなさんの個性が出てきます。
同じタイトルでも表現の方法で全く変わってきます。
4.ナビゲーション FireWorks
 | ホーム | 新着 | ガイド | ヘルプ | 設置場所 | コンタクト | プライバシーポリシー |
を、整列等を使って上手に並べましょう。
アイキャッチになるように文字の頭に三角形のマークも付けます。
文字とマークをグループ化するとやりやすいですね。
5.切り出し・書き出し FireWorks
ここまでデザインが出来たら後は切り出してスライスの書き出しをします。
ボタンの部分は、ロールオーバー用の画像も作りましょう。
6.画像のはめ込み・ロールオーバーの設定 DreamWeaver
書き出した画像をはめ込んでいき、ボタンの部分はロールオーバーを設定します。
7.CSSの設定 DreamWeaver
navi footnavi foot のテキスト部分にCSSを設定していきます。
前回の勉強の成果もあり、みなさん設定もラクラクできるようになったようですね!
これで大まかなサイトが完成しました。
残りの時間で皆さんバナーの制作に取り組んでみましたが、いかがでしたか?
一つのサイトができると嬉しいですね!
今週も皆さんお疲れさまでした~!

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


*




PAGE TOP