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

Dreamweaver
ホームページ・ビルダー
GoLive
html編集ソフトをお持ちでない方
以下の説明はWindows版 FrontPage2002を使用しています。OS・バージョンによって若干異なりますのでご注意下さい。

ここでは、ホームページ公開までの一連の作業をマスターした方のために、一歩進んだ作業をご説明いたします。

●ボタンを増やす
ここでは、6個めのボタン「お問い合せ」の次に「E-mail」のボタンを追加する作業を行います。あらかじめ、ボタンの画像を用意します。

1.

sozaiフォルダ内のnavi.htmlをWebブラウザで開き、ボタンのページを開きます。

2.

ボタンの画像の上で右クリック→「名前を付けて保存」を選択します。

3.

bt_07.gifと名前を付け、imageフォルダに保存します。

ロールオーバーのJavaScriptが設定されているサイトの場合は、二種類のボタンを用意します。ファイル名はマウスオフ時が”bt_07_off.gif”、マウスオン時が”bt_07_on.gif”になります。

1. htmlファイルを開きます。

2. ボタンを挿入したい場所の一つ前のセルにカーソルを移動します。
1)選択したいセルに入っているボタンの画像を選択します。
2)→キーを一回押します。

3. メニューバーから[表]-[挿入]-[行または列]を選択します。

4. 列・列数1・選択範囲の右、を指定し、OKを選択します。

5. ボタン画像を挿入します。
画像の挿入を参照してください。
>ボタンの追加が完了しました。

マウスが触れるとボタンの画像が変化するロールオーバーのJavaScriptが設定されているサイトの場合は、続けて「JavaScriptを設定する」に進みます。

マウスが触れるとボタンの画像が変化するロールオーバーのJavaScriptの設定を説明します。

1. 「ボタンを増やす」の1〜5の作業を行い、ボタンを挿入します。
2. 挿入したボタンを選択し、メニューバーから[書式]-[ダイナミックHTML効果]を選択します。
 
3. DHTML効果のウインドウに必要項目を設定します。
イベントの選択--「マウスポイント」を選択します。
摘用--「画像の置き換え」を選択します。
「画像の選択」をクリックしてファイル名を指定します。ここではbt_07_on.gifになります。
以上でロールオーバーの設定は終了です。ブラウザでプレビューすると下図のように効果を確認することができます。
マウスオフ時 マウスオン時

ここでは、マウスが触れるとその画像自体が変化するロールオーバーの方法をご紹介しました。マウスが触れるとポイント部分のみが変化する場合は若干方法が異なりますのでご注意ください。
●ボタンを減らす

1. htmlファイルを開きます。

2. 削除するボタンを選択し、キーボードで「delete」キーを押し、削除します。

3. カーソルはそのまま動かさず、メニューバーから[表]-[選択]-[セル]を選択します。
4. メニューバーから[表]-[セルの削除]を選択します。
>画像と列が削除されました。

ボタンとボタンの間にしきりの画像があるデザインの場合は、これも同様にして削除します。