今回のねらい すっかり更新がお久しぶりになってしまいました。ごめんなさい！今月からまた、コンスタントに更新する予定にしておりますので、どうぞよろしくお願いします。
さて、今月は「Fireworks CS3」の話題です。 ふと気がつくと、いままでDreamweaverの話題ばかりになっていましたので、今月は予定を変更してFireworksの話題を取り上げたいと思います。 AdobeとMacrimediaが一緒になって、一時は存続が危ぶまれたかのように思えたFireworks。ところが、CS3にバージョンアップされて、更なる進化を見せています。 Photoshopよりも、Web制作ワークフロー向けのグラフィック制作に特化したFireworksについてスポットをあててみました。
ページ機能を使った、モックアップ作成支援FireworksCS3では、「ページ機能」が追加されました。ページ機能を使うと、1つのPNGファイルの中に複数のWebページのデザインを持つことができます。また、ページにリンク指定を行えたり、「マスターページ」と呼ばれるひな形を使って複数ページデザインを共有管理することも出来ます。 この「ページ機能」、Web制作でいつ役に立つのか？というと…「プレゼンテーション」の時に力を発揮します。一般的にWebサイト制作の企画の段階では、サイトデザインを決めてそこから数ページのサンプルサイトを作成し、関係者にプレゼンテーションを行います。サンプルサイトをプレゼンテーションで「Webサイトらしく見せる」ためには、HTML化をせねばならず面倒な作業でした。 Fireworksの「ページ機能」を使えば、たった一つのPNGファイルだけで、サンプルサイトを作ることが出来ます。 - モックアップ、カンプとは？
- プレゼンテーションなどで使用するサンプルことを「モックアップ」や「カンプ」などど呼びます。
「ページ機能」を使って、モックアップを作ってみるマスターページを作成する- [ページパネル]のオプションメニューから[マスターページとして設定]を実行します。
- マスターページのデザインを作成します。今回は、各ページでデザインを共有したいページのヘッダー部分を作成しました。
ページの追加- [ページパネル]のオプションメニューから[新規ページ]を実行します。
- マスターページのデザインを基に新規ページが作成されました。
- [ページパネル]で、新しく出来たページ名をダブルクリックし、名前を「toppage」と変更します。
- トップページのデザインを作成します。
- 同様の操作で、新しいページ「subpage」を作成します。
- ページのキャンバスサイズ
- ページのキャンバスサイズは、ページごとに個別に変更することが可能です。今回作成した「toppage」と「subpage」では、キャンバスサイズの長さが異なります。「subpage」の方がコンテンツの文面が長い分、キャンバスサイズも縦に長くなっています。
ページ間のリンクを設定する- [矩形ホットスポットツール]
 を使って、「toppage」のリンクボタンのグラフィックの上に[ホットスポット]を作成します。
- 作成したホットスポットのプロパティの[リンク]をプルダウンし、「subpage.html」を選択します。
- ホットスポットのリンク
- ページを作成すると、ホットスポットプロパティの[リンク]の項目に「ページ名.htm」というリンク指定が作成され、プルダウンして選ぶことが出来ます。htmlになったときのことを考えて、ページの名前には、ファイル名をつけるようにすると良いでしょう。
プレビュー- ページパネルから「toppage」を表示します。
- [ファイル]−[プレビュー]−[すべてのページをプレビュー]を実行します。
- ページがプレビューされます。リンクボタンも有効になっているためページの移動が行えます。
今回作成したサンプル今回の実習で使用したファイルは「webtant_user_16_1207337574.png」です。FireworksCS3をお持ちの方は、開いて確認してみましょう。 r360studioからのお知らせ
|
職種からお仕事情報を探す
Webディレクター│
Webデザイナー│
コーダー│
ネットショップ運営│モバイルサイト│その他
今週の特集
