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

こんにちは。
2007年3回目のWEBデザイン応用編がはじまりました!
これから毎時間の授業内容をレポートさせていただきます、くろねこです。
よろしくお付き合いくださいませ~
さて、初日の授業は・・・。
まずWEB関連用語のおさらいも兼ねて、先生による講義がはじまりました。
HTM文書を記述する際の約束事を再確認。HTML文書の一番最初には、
ページで使用しているHTMLのバージョンを定義する必要があるので、
文書型宣言を記述することがお約束ですよね。
よく耳にする「HP」と「WEBサイト」の違いも改めて確認し、なるほどぉ~と実感。
本来ならHPとはWEBページの中で最初に表示されるトップページのことを示すそう。
で、WEBサイトとはトップページとその他のWEBページで構成された、一連のサイトのこと。
でも一般的にはHP=WEBサイトと、同義語で使われていますよね~。
また、「ファイルサイズ」「イメージサイズ」も間違いやすいので要チェックです。
ファイルサイズとは、ファイルの容量を示し、イメージサイズとは画像を印刷した
時のサイズ(画像解像度)のこと。
作業効率を高めるためにかかせないショートカットの操作も教えてもらいました。
ウインドウズ+E・・・マイコンピュータの立上げ
ESC・・・作業をキャンセル
F2・・・編集
Ctrl+X・・・カット
Ctrl+C・・・コピー
Ctrl+V・・・貼り付け
Ctrl+Z・・・操作を取り消す
Ctrl+S・・・上書き保存
Ctrl+A・・・全選択

どれも1度覚えてしまえばかなり便利です。
忘れることのないようにしましょう~!
そして、ここからDreamWeaverFireworks使っての作業となりました。
table挿入時の基本は、1行1列の幅100%。
幅100%で作っておけばtableの中に文を打ったり画像を貼り付けたりという作業も
しやすいですし、行や列の追加は後々DreamWeaverで簡単に出来ますもんね。
■tableの罫線の付け方について
一般的には、tableのボーダーの設定に値を入力し、線を付けてしまいがち。
ですが、tableの背景色を黒、tdの背景色を白にして、cellspacing(セル間隔)に1を
入力してあげることで、ボーダーで“1”を設定するよりも細い黒い罫線が引かれた
ように見えるんです。
ちょっと裏技?的な使い方かもしれませんが、より自然なデザインに仕上がるので
使っていきたいですね。
■背景画像の設定について
Fireworksで作った背景用の画像を書き出す際のポイントをいろいろ教わりました。
グラデーションを付けた画像を背景画像に設定する場合の注意点は・・・。
背景画像はX軸方向・Y軸方向に自動的に繰り返して表示される性質をもつため
tableの高さと、書き出す画像の高さを同じ値にしましょう。
そうしないとグラデーションの微妙な色合いが表現されず、不自然になってしまいます。
■バナーの制作
1)Fireworks
矩形を作り、矩形の左上から右下にむかってグラデーションをかけました。
この時グラデーションを画像全体にかけるのではなく、画像の2/3くらいに対して
かけると、よりさりげないデザインになりますね~。
また、フィルタから文字に対してドロップシャドウとグローをつけました。
これらもよく使いますので、フィルタの効果をいろいろ試してみましょう。
使いこなせるようになれば、グッとデザインの質がアップしますよ~
そして、バナーらしさを出すため、ロールオーバーの画像も作りました。
先ほど作った画像の一番上に、白い矩形をのせて、白い矩形の透明度を下げます。
これで、簡単に少し明るくなった画像が出来ます。
画像が出来たところで、それぞれの画像を書き出します。
2)DreamWeaver
最初に作った画像を選んだ状態で、ビヘイビアの追加から、スワップイメージを選択し、
後に作ったロールオーバー用の画像を選べば出来上がりです。
画像にリンクを張る場合も注意点が1つ。
別サイトへのリンクを張る場合は、ターゲットを_blankに設定してあげると、
別ウインドウで開きます。
また、仮にリンクを張りたい場合には、リンクにを入れておきましょう。
と、初日はこんな感じで終了~。お疲れ様でした!
来週からはスタイルシートにも触っていくので、これからがんばっていきましょうね。

 

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

コメント

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

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

*

PAGE TOP