準備
サイトをコピーする
コンテンツ名を変更する
画像を作成する
  サイトタイトル
  メニューボタン
htmlファイルの編集
htmlファイルを開く
サイトを定義する
ページタイトルを変更する
ファイル名を変更する
画像を削除・挿入する
テキストを入力する
リンクを設定する
ブラウザで確認する
ファイルを転送する
メニューボタンを増やす
JavaScriptを設定する
Flashを挿入する

Dreamweaver
ホームページ・ビルダー
GoLive
html編集ソフトをお持ちでない方
ここでご紹介するのはAdobe Photoshopを使用した制作手順の一例です。さらに詳しい手順や、その他アプリケーションの操作方法は各画像処理ソフトの説明書等をご覧ください。

使いたいボタンが収録されていない場合は、文字の載っていない空の画像を使用して新しく作成します。
●ボタンの画像を作成する

1. コピーしたファイル内の第一階層目にあるindex.htmlをwebブラウザで開きます。

2. トップページに記載されているnavi.htmlを選択します。

@rt web1ではメニューボタン内にある「contents」のメニューを選択します。
navi.htmlへのリンクが設定されていない場合はsozaiフォルダ内にあるsozai.htmlをWebブラウザで開いて各パーツ一覧を表示させて下さい。
>各パーツ一覧が表示されます。

3. buttonのページを開き、テキストの乗っていないボタン画像の上で右クリックし、「名前を付けて保存」を選択します。

4. 保存先をマイドキュメントやデスクトップなど、自分が分かりやすい場所に設定し、保存を選択します。

5. Photoshopを開き、メニューバーから[ファイル]-[開く]を選択します。

6. 新しく保存されたボタン画像を選択し、開くを選択します。

7. メニューバーから[イメージ]-[モード]-[RGBカラー]を選択します。
*画像がJPEG形式で保存してある場合は必要ありません。

8. 文字ツールでタイトルを入力します。

9. メニューバーから[ファイル]-[Web用に保存]を選択します。

10. 画像を最適化し、OKを選択します。
元画像と同じファイル形式(GIFなど)で最適化してください。

最適化するには2アップ画面にし、画像の形式(GIFなど)・カラー数などを調節し、画像のサイズを最適な容量に減らします。
画像の最適化の方法は画像ファイルについてをご覧下さい。

11. 保存場所を第一階層目にあるimageフォルダに設定し、ファイル名を入れ替えたい元のボタン画像と同じファイル名にして保存を選択します。
@rt web2以降ではimageフォルダ内にあるボタンの画像は現在使用しているボタンを左から、もしくは上から順番に「bt_01.gif」「bt_02.gif」「bt_03.gif」「bt_04.gif」「bt_05.gif」という連番のファイル名に変更されています。
入れ替えたい元のボタン画像のファイル名の確認はindex.htmlにあるボタン画像の上で右クリックし、[プロパティー]を選択してファイル名を確認して下さい。

12. 上書きしますか?というウィンドウが開いたら上書きを選択します。

13. このサイトのボタン画像にはマウスオーバーが設定されていますので、1.から12.の作業をマウスオンの画像でも同様に行います。
(マウスオーバーが設定されていない場合は12.で完了です。)

実際にWeb上画像が切り替わった時に画像がずれてしまうことがあるので、マウスオフとマウスオン用の画像の大きさ、文字の位置などは全く同じにしてください。