デジハリ080628

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

前回に続きFireｗorks、そしてDreamweaverに入る。

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

　

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

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

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

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

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

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

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

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

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

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

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

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