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

応用編の授業は今回で三回目。
授業の進み方はなんとなく基礎編と似ているな~と思っていたのですが…
進むスピードも内容も全然違うぅ。。
置いていかれそうになることもしばしば…
でももちろん置いていかれたりなんてしませんよわからないところはきちんと教えてもらえるし、小さな疑問もみんなで真剣に考えるし、差し入れのお菓子もおいしいし(?)みんなで一生懸命、みんなで仲良しな授業ってやっぱり楽しいです!
さー、今日は二週間ぶりに全員そろっての授業です!!
ということで、もちろんはじめは復習から
写真のレタッチをカンタンにおさらい。
そしてボタン作りのおさらい。
すらすらと進みますね~
そうして今回の中心となる授業内容はロールオーバーボタンの制作です。
ロールオーバーボタンてご存知ですか?
ホームページをご自身で作る人や、インターネットをする人は皆さん見たことがあるとか、知っているという方が多いのではないでしょうか
ロールオーバーボタンはマウスがボタンの上に乗っかると変身するボタンのことです。
赤りんご→こんな感じですね。
そのためにはjava scriptっていうものを使います。
java scriptってなんだか複雑で難しい感じなのですが…これもホームページ作りの必殺ソフトDream Weaverを使えばカンタン楽々♪
…ってこのセリフお店の回し者みたいでもほんとにこれ使うととっても簡単なんですよ
今回は姉妹品のFire Worksという画像編集ソフトで素材画像をレタッチします”画像編集ソフトというとPhoto Shopなんかが有名ですが、私はWEB限定で使うならFire Works1つで十分かなーと使っていて思います。
さて、トーンカーブと色相彩度でまず画像を編集。
そして、次にボタンを作ります。矩形ツールと文字入力でボタンが簡単に完成
マウスオン(マウスが上に乗った)状態の時のボタンももちろん作ります!!
楽しみ
色を変えたりしながら雰囲気を出します。。。。
素材が完成したら早速その素材を使ってDream WeaverでHTMLを編集。
そうして完成したのはこちら

    ↓↓↓
  マウスオン!!

こんな感じに変わるんですよー!!!
これが今回のポイント
ロールオーバーのメニューボタンです


ここでロールオーバーの実演ができないのは残念ですが、皆さん想像力で補ってください
いっぱいイッパイになりながらもなんとか、無事に完成したHTMLをブラウザを通して見たときはほんっとうに感動しました**
そんな楽しい時間も気づいたらまたおしまい。
今からもう、次の授業が楽しみです♪♪
では、また週末にお会いしましょうー

 

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

コメント

    • オーツカ
    • 2006年 6月 06日

    うっかりお邪魔します☆
    いやーーーーー、しかしスバラシイ!!
    結ちゃん、あなたはエライ!!
    予習復習バッチリですなっ♪
    コマンド+シフト+3を押してる姿が
    目に浮かびます(T∪T)
    せんせ~~~!
    この子はこんなに
    大きくなりましたぁ~~~!
    私も大きくなりまぁ~~す(>_<)
    (横とか縦とかそちらの方向へ…)

    • 2006年 6月 08日

    Winはボタンひとつ、クリック一回でパチリ★なのですよ~♪
    ノートのマク子さんとは最近倦怠期なくらいにWinさんと仲良しです。
    私は日々横へ横へ育っています。
    オーツカさんも一緒に大きくなりましょー!
    今週の土曜のWDSでは成長(?)の成果をお楽しみに(o’ー’o)ノシ

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

*

PAGE TOP