今回のねらい

すっかり更新がお久しぶりになってしまいました。ごめんなさい！今月からまた、コンスタントに更新する予定にしておりますので、どうぞよろしくお願いします。

さて、今月は「Fireworks CS3」の話題です。

ふと気がつくと、いままでDreamweaverの話題ばかりになっていましたので、今月は予定を変更してFireworksの話題を取り上げたいと思います。

AdobeとMacrimediaが一緒になって、一時は存続が危ぶまれたかのように思えたFireworks。ところが、CS3にバージョンアップされて、更なる進化を見せています。

Photoshopよりも、Web制作ワークフロー向けのグラフィック制作に特化したFireworksについてスポットをあててみました。

ページ機能を使った、モックアップ作成支援

FireworksCS3では、「ページ機能」が追加されました。ページ機能を使うと、1つのPNGファイルの中に複数のWebページのデザインを持つことができます。また、ページにリンク指定を行えたり、「マスターページ」と呼ばれるひな形を使って複数ページデザインを共有管理することも出来ます。

この「ページ機能」、Web制作でいつ役に立つのか？というと…「プレゼンテーション」の時に力を発揮します。一般的にWebサイト制作の企画の段階では、サイトデザインを決めてそこから数ページのサンプルサイトを作成し、関係者にプレゼンテーションを行います。サンプルサイトをプレゼンテーションで「Webサイトらしく見せる」ためには、HTML化をせねばならず面倒な作業でした。

Fireworksの「ページ機能」を使えば、たった一つのPNGファイルだけで、サンプルサイトを作ることが出来ます。

モックアップ、カンプとは？

プレゼンテーションなどで使用するサンプルことを「モックアップ」や「カンプ」などど呼びます。

「ページ機能」を使って、モックアップを作ってみる

マスターページを作成する

1. [ページパネル]のオプションメニューから[マスターページとして設定]を実行します。
   
   　
2. マスターページのデザインを作成します。今回は、各ページでデザインを共有したいページのヘッダー部分を作成しました。
   
   　

ページの追加

1. [ページパネル]のオプションメニューから[新規ページ]を実行します。
   
   　
2. マスターページのデザインを基に新規ページが作成されました。
   
   　
3. [ページパネル]で、新しく出来たページ名をダブルクリックし、名前を「toppage」と変更します。
   
    
4. トップページのデザインを作成します。
   
   　
5. 同様の操作で、新しいページ「subpage」を作成します。
    

ページのキャンバスサイズ

ページのキャンバスサイズは、ページごとに個別に変更することが可能です。今回作成した「toppage」と「subpage」では、キャンバスサイズの長さが異なります。「subpage」の方がコンテンツの文面が長い分、キャンバスサイズも縦に長くなっています。

ページ間のリンクを設定する

1. [矩形ホットスポットツール]を使って、「toppage」のリンクボタンのグラフィックの上に[ホットスポット]を作成します。
   　
   
2. 作成したホットスポットのプロパティの[リンク]をプルダウンし、「subpage.html」を選択します。
   

ホットスポットのリンク

ページを作成すると、ホットスポットプロパティの[リンク]の項目に「ページ名.htm」というリンク指定が作成され、プルダウンして選ぶことが出来ます。htmlになったときのことを考えて、ページの名前には、ファイル名をつけるようにすると良いでしょう。

プレビュー

1. ページパネルから「toppage」を表示します。
   　
2. [ファイル]−[プレビュー]−[すべてのページをプレビュー]を実行します。
   　
3. ページがプレビューされます。リンクボタンも有効になっているためページの移動が行えます。
   

今回作成したサンプル

今回の実習で使用したファイルは「webtant_user_16_1207337574.png」です。FireworksCS3をお持ちの方は、開いて確認してみましょう。

r360studioからのお知らせ

• 次回は、「FireworksCS3になってどう変わったか？- 其の二 -」をお届けする予定です。
• 「Webセミナー」受付中です。http://www.webtant.net/seminar/index.html
• Mixiやってます。マイミク募集中です！同じ趣味の方、志しの方、マイミク申請くださいませ。
  http://mixi.jp/show_friend.pl?id=60060