« 情報部会:第2回研修委員会 | トップページ | レッツアクセス総合学科 »

2008年6月28日 (土)

デジハリ080628

デジハリ横浜校、総合ProコースWebデザイナー専攻。第8回目の授業。

前回に続きFireworks、そしてDreamweaverに入る。

【午前】
Fireworksの特技であるスライス機能とビヘイビアを利用したシンプルロールオーバーの設定。図は、スライスが終わってロールオーバーを設定する場面と、完成したWebページのイメージ。

スライスにロールオーバーの設定 ボタンのロールオーバー

レイアウトをデザインした一枚の画像を使って、スライス作業のコツを学ぶ。写真やボタンとなる部分・テキストを入れる部分を意識しながらスライスし、テーブルが複雑にならないよう修正していく作業。パーツごとに画像処理は最適化する。

シンプルロールオーバーは、マウスが乗った状態でフレーム2に用意する画像に入れ替わる。これは、選択したスライスパーツにビヘイビアで「ロールオーバー機能」を追加するだけで実現する。JavaScriptを知らなくても簡単!
Fireworksでロールオーバーを作成する場合、フレーム1~4の画像は、順にUp/Over/Down/OverDownの役割を果たす。

【午後】
午後前半は、FireworksのGIFアニメーション作成機能。昔なつかしのインベーダの画像を移動させる。2通りの方法を学ぶ。モーションパスや拡大・縮小、回転や不透明度の変化なども設定できるが、今回の実習では簡単なところだけ。

インベーダのGIFアニメを見る

(1)手動による方法
まずは、キャラクタを配置したフレームを複製し、それぞれでキャラの位置を手作業でずらす。オニオンスキン表示を利用して動作を確認していく。各フレームの表示時間を変更して、スピードを調整。イメージプレビューでGIFアニメ形式で、ループを設定して書き出す。

(2)Fireworksの機能による方法
キャラをシンボル化して、1つのフレームにスタート位置とゴール位置にインスタンスを配置。「インスタンスのトゥイーン」機能で途中を補完させてフレームに配分する。この方法はFlashと同じだ。

【午後後半】
Dreamweaverの最大の機能であるサイト管理の説明で1時間弱。

Dreamweaverのサイト管理

今までにWebページを作ってサーバにアップした経験がある方には、良く理解できるありがたい機能だ。しかし、まだ未経験の方には理解できなかっただろうなぁ。

その他、
・環境設定で「HTMLの代わりにCSSを使う」のチェックをはずすこと
・新規作成したページのページプロパティの設定の説明

中間課題の告知があって本日の授業は終了。
16時より、半年前のクラスの卒業制作発表会があり、希望者は参加する。
(残念だが、校務のため職場に直行)

■今までもDreamweaverは愛用している。サイト管理機能により、ファイル名の変更や移動によるリンク切れが無くなり、使っていないファイルの発見もラクだ。もう一つ役に立つのが、前バージョンから充実したCSS設定の機能。タグインスペクタも編集の効率を上げるのに役にたつ。実際にはデザインビューよりもコードビューばかりで、ほとんどテキストエディタとして使っている。

一方、ホームページ○○○ーは本格的なWebページ作成ソフトとして全く評価していない。余分な機能が多く、じっくりと自分の設計をすることができない。しかも機能を利用して作成したものはコードが読みにくいので、後から編集しにくい。DWとは使用目的が違うものと理解している。

|

« 情報部会:第2回研修委員会 | トップページ | レッツアクセス総合学科 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/178689/21942577

この記事へのトラックバック一覧です: デジハリ080628:

« 情報部会:第2回研修委員会 | トップページ | レッツアクセス総合学科 »