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

Other html editor
ホームページ・ビルダー
GoLive
Frontpage
html編集ソフトをお持ちでない方
Dreamweaverを使用した制作手順
以下の説明はWindows版 Dreamweaver MXを使用しています。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. 列・列数・後ろの列を指定し、OKを選択します。
>テーブルの列が挿入されます。

マウスが触れるとボタンの画像が変化するロールオーバーのJavaScriptが設定されているサイトの場合は、5.で画像を挿入せずに、次のJavaScriptを設定するの3.に進んで下さい。

5. ボタン画像を挿入します。
画像の挿入を参照してください。

JavaScriptを設定する
マウスが触れるとボタンの画像が変化するロールオーバーのJavaScriptの設定を説明します。
1. htmlファイルを開きます。

2. デザインビュー内でJavaScriptを設定する画像を入れる場所を選択します。

3. メニューバーから[挿入]-[インタラクティブイメージ]-[ロールオーバーイメージ]を選択します。

4. 必要項目を入力し、OKを選択します。
イメージ名:
他のボタンを参考にします。(例 Image7)
元のイメージ: マウスが載っていない画像です。(例 bt_07_off.gif)
ロールオーバーイメージ: マウスが載っている時の画像です。(例 bt_07_on.gif)
クリック時にURLへ移動: リンク先を指定します。

以上でロールオーバーの設定は終了です。ブラウザでプレビューすると下図のように効果を確認することができます。
マウスオフ時 マウスオン時

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

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

2. 削除したいボタンを選択して「Delete」キーを押します。

3. カーソルはそのままで、メニューバーから[修正]-[テーブル]-[列の削除]を選択します。
 >画像と列が削除されました。

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

NEXT

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