風のまにまに号

・ウィンドウ枠など不用な部分を「切り抜きツール」で切り抜いたら、これをベースとしてレイヤーをロックしておきます。その上にレイヤーを追加して、前回リストアップしたパーツ画像を読み込んで配置していきます。（ドキュメント内への読み込みは、ウィンドウからドラッグ＆ドロップするやり方が早いです）

・各パーツをキャプチャーした画像と同じ位置に配置したら、全て選択して
「編集」→「挿入」→「スライス」
を実行。さらに、出てきたダイアログボックスで「複数」を選択します。作成されたスライスを一個づつ選択して、「スライス名」の欄に元の画像ファイル名と同じ名前を入力していきます。（例：「gblnav_lef」t等、拡張子はつけません）

・先ほどパーツ画像を配置した「レイヤー２」も、スライスの配置されている「Webレイヤー」もロックしてしまって、レイヤー２の上に新規レイヤー（レイヤー３）を追加、この上で自由にデザインを作っていきます。レイヤー１に配置したベース画像をビットマップ的に色調整して使ってもいいし、Fireworksのオブジェクトから新たにデザインを起こし直してもいいです。今回は全体をブルー系の色テイストにアレンジしてみました。
次にWebレイヤーでスライスを一枚づつ選択して、画面上の「プレビュー」タブと画面右の「最適化」パネルを使って書き出し設定を行います。基本的にbg_grad.jpg、bg_nav.jpgの２枚はJPG、それ以外のスライスがGIFに設定されていれば問題ありません。

※画面左上のスライスは背景画像用に新たに配置しました。今回のデザインではグラデーションを使わないので、背景画像のサイズは元画像と違っても問題ありません。

・「ファイル」→「書き出し」を実行して、続いて現れるダイアログボックス内で、
ファイルの種類：イメージのみ
スライス：スライスの書き出し
スライスのない領域も含める：チェックOFF
と設定して、「保存」を実行します。ファイル名の欄は何でも構いません。この書き出し実行時の「保存する場所」を前回サンプルのHTMLを保存したディレクトリと同じ場所に設定してください。
例：/MT_Templates/

・以上でサンプルHTMLの基本デザイン変更は終了です。中身の画像を変更しただけでも、元のHTMLファイルをブラウザで開くと下の図のように全く違う色テイストに変更することができました。

次回以降では、いよいよサンプルHTMLから不要な項目を削除して、Movable Type用のタグを埋め込んでいきます。