@rt web ビギナーズガイド
サイトマップ サポートサイト DDNトップページ
TOP WEBサイトのしくみ WEBサイトを作る前に @rt webについて WEBサイトの作成手順 リンク
WEBサイトの作成手順
Front Page
初級編
準備
・ サイトをコピーする
・ コンテンツ名を変更する
・ 画像を作成する
  ├ サイトタイトル
  └ メニューボタン
htmlファイルの編集
・ htmlファイルを開く
・ サイトを定義する
・ ページタイトルを変更する
・ ファイル名を変更する
・ 画像を削除・挿入する
・ テキストを入力する
・ リンクを設定する
・ ブラウザで確認する
・ ファイルを転送する
応用編
・ メニューボタンを増やす
・ JavaScriptを設定する
・ Flashを挿入する

Other html editor
・ Dreamweaver
・ ホームページ・ビルダー
・ GoLive
・ html編集ソフトをお持ちでない方
Front Pageを使用した制作手順
以下の説明は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を設定する
マウスが触れるとボタンの画像が変化するロールオーバーのJavaScriptの設定を説明します。

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

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

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

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

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

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

NEXT

TOP / WEBサイトのしくみ / WEBサイトを作る前に / @rt webについて / WEBサイトの作成手順 / リンク
サイトマップ / サポートサイト / DDNトップページ
Copyright (C) AIDIA Inc. All Rights Reserved.