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

こんにちは。
WEBプロフェッショナルデザイナークラス(WEBデザイン応用編)のアシスタントを勤めるHIROです。
3ヶ月くらいのお付き合いになると思いますので、どうぞよろしくお願いします
2007.4.7.sat.
第1回

基本的に覚える事の確認と、今までの復習を勉強しました。
まずウェブサイトを制作していくにあたり、
タグを理解すること総合的な知識が必要という事を先生からお話ししていただきました。
先生のお仕事で制作したサイト事例を紹介していただきました。
サイトは様々な仕様のものがありました。
◎フラッシュのサイト
◎ブログのカスタマイズ
◎ Google マップを使ったもの
◎2次元バーコード
◎不動産関係の検索サイト
・・・
ざっと紹介していただいただけでも、様々な知識が必要になってくるという事がわかりました。
オールマイティーに勉強していかなくてはいけないという事ですね!
ではいよいよ、ここから今までの復習を兼ねた授業が始まります。
基本1.ソース
最初に必ず文書型宣言をしなくてはいけません。
<DOCTYPE HTML PUBLIC ・・・・・>
これは、そのサイトがどんなルールで作っているかを表すものです。
必ず一番最初に書きましょう。
その他
 <HEAD> <TITLE> <STYLE> ・・・などのタグの順番にも気を付けましょう!
基本2.ブラウザ
サイトを作りながらブラウザで確認をしていく事を忘れてはいけないですよね。
エンドユーザーと同じ環境で見る事が大切です。
一般的にIE(Internet Explorer)を使っているユーザーが多いので、必ずIEでも確認しましょう。
先生がオススメしてくれた Firefox は、様々な便利な機能があります。
◎ブックマークの同期がとれる。
◎スクリーンショットでは、見ている画面が1枚で撮れる。
◎ IEのシュミレーションができる。
など・・・
他にもいろいろありそうなので、是非制作の時には活用していきたいですね。
基本3.ショートカット
スムーズに仕事を進めていくためには、ショートカットは必須です。
・win + E → マイドキュメント
・Ctrl + X → カット
・Ctrl + C → コピー
・Ctrl + V → ペースト
・Ctrl + Z → 一つ前へ戻る
・Ctrl + S → 上書き保存
・Esc → キャンセル
・・・など、皆さんもうお使いになっているとは思いますが、便利なショートカットを見つけて自分のものにしていきましょう!
MACとWinでは少し違っているので気を付けましょうね。
私は長年MAC愛好家なので、winを触るととても戸惑ってしまいます・・・
それではここからソフトに入っていきます。
1.サイトの定義 Dream Weaver
サイトの管理からサイトを開き、サイト名をつけます。
サイトを定義すると、ドリーム上のサイトと、データが連鎖しています。
ドリーム上でデータを増やしたり、消したり、更新すると、データの方も同じようになっています。
まず最初にサイトの定義をしてしまえば楽ですね。
2.テーブルの作成 Dream Weaver
まず、タグうちで2列2行、幅100%で作ってみました。
みなさんタグうちでも大丈夫なようでしたね!
テーブルアイコンで作成するのももちろんオッケーですよ。
最初にテーブルを作るときは1列1行で作りましょう。
それから列や行を増やしたり、統合させたりすると都合がいいようです。
3.色について Dream Weaver
カラーパレットの色は安全な色です。
最近ではユニバーサルデザインという言葉を耳にしますね。
WEB上のバリアフリーという感じでしょうか?
カラーパレットの色を使えば、どんな環境のPCでも見れるはずです。
最初に作ったテーブルに色を入れていきます。
<tr> や <td> タグに色をいれてみると、皆さんお気づきになったと思いますが <tr> よりも <td> の方が強く、優先的に実行されます。
授業では、黒いテーブルの中に、背景色白・余白1のテーブルを入れてみました。
そうすると黒い線が見えます。
余白で調整すると、いろいろなタイプの表が作れそうです。
これは今後活用していきそうですね。
4.alt属性 title属性 について Dream Weaver
●alt=”” の内容には、その画像の説明を入れるのではなく、画像の代わりになるテキストを記述するようにします。
 HTML4.01では alt属性は必須とされています。できるだけ指定しておくようにしましょう。
●title属性で、マウスポイントしたときの説明文を指定できます。
これらの属性はSEO対策に有利になります。
文字が多いとひっかかりやすいので、どんどん活用していきましょう!
5.バナーの制作 Fire works
600×1000の白い画面を作り、その中に5つのバナーを作っていきます。
ここではフィルターやテクスチャーの使い方を覚えました。
いろいろな種類があって、迷ってしまいますよね!
でも、ガチャガチャいじって使いすぎると・・・
まるで『始めてホームページ作りました』という感じに見えてしまうので、気を付けましょうね。
最初の3つのバナーはみんな同じように作ってみました。
残りの2つは、各自好きなバナーを作ってみました。
上手にできましたか??
それではバナーらしくするために、ロールオーバー画像も作ります。
全ての画像の一番上に、半透明の白をのせます。
これで、マウスオーバーの時にちょっと変化ができますね。
それぞれの画像を切り出して書き出します。
書き出しの時には イメージのみ スライスの書き出しをして、選択スライスのみ にするといいです。
imageフォルダを作って、そこに画像が入るようにしましょう。
6.スワップイメージ リンク先の指定 Dream Weaver
次にDreamに戻りロールオーバーの指定をしていきます。
ビヘイビアスワップイメージで設定します。
リンク先を指定しましょう。
この時注意するのがターゲットを指定する事です。
今回は_blankにしました。
こうすると、指定したサイトが別ウィンドウで開きます。
これでバナーの完成です。
みなさん上手に出来たでしょうか???
今日は最後に先生から便利な色のサイトを3つ紹介していただき、終わりとなりました。
 ◎colorscheme http://wellstyled.com/tools/colorscheme/index-en.html
 ◎WEB色見本 原色大辞典  http://www.colordic.org/
 ◎4096 color wheel http://www.ficml.org/jemimap/style/color/wheel.html
皆さんお疲れさまでした~!

 

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

コメント

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

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

*

PAGE TOP