ホームページビルダーによるHPの作成

ホームページビルダーによるホームページ作成
Ⅰ
新規作成とファイル保存
＜ホームページビルダー起動画面＞
※ホームページビルダーを起動し、左端の白い用紙のアイコンボタン（「新規作成ボタン」
）をクリック
します。ここで新しいファイル（「ｈｔｍｌファイル」または「ｈｔｍファイル」と言います）を作成
します。
（↓図１）
＜メニューバー＞
※一番上の「メニューバー」から「編集」をクリックし、新しいページ（ｈｔｍファイル）を作成する
ための必要最低限の設定をします。（図３および図４）
（↓図２）
クリック
＜タイトル入力①＞
※タイトル（「330-A ページ」
）を入力します。
（↓図３）
②
①
1/10
＜背景／テキスト色選択②＞
※「背景/テキスト色」タブ（②）を選び、背景やテキスト（文字）の色の設定をします。
（↓図４）
＜写真挿入＞
※「My Pictures」に入っている写真画像を２つ挿入してみます。
（↓図５）
ドラッグ＆ドロップ
＜文字の修飾＞
※「書式設定バー」では、テキスト（文字）を太くしたり、
大きさを変えたりすることができます。
（大抵の操作は、MS-Word と同じ感覚です。）
（↓図６）
太字
文字拡大
2/10
＜作成したｈｔｍファイルと使用した画像ファイルの保存＞
※作業画面にて作成したｈｔｍファイルをパソコンに保存します。
メニューバーの「ファイル」→「名前を付けて保存」を選択します。
（↓図７）
クリック
クリック
※「My Documents」フォルダ内にあらかじめ作っておいた「330-A_HomePage」フォルダの中に、
新規作成したファイル（ここでは「330-a」という名前を付けました）を保存します。
（名前の後の拡張子（ｈｔｍ）は自動的に付いてきますので入力の必要はありません。）
（↓図８）
クリック
3/10
（↓図９）
クリック
※使用した画像ファイル２つ(「LC_logo.gif」と「houshi.jpg」)を、新規作成したファイル「330-a.htm」
と同じフォルダ「330-A_HomePage」に保存します。
（特に操作をしなくても、（図９）の操作の後、自動的に使用した画像ファイルの保存画面が出てきま
す。）
（↓図１０）
クリック
4/10
Ⅱ
Web サーバーへのファイル転送（FTP 転送）
＜「ファイル転送」の起動とサーバープロファイルの作成＞
※ 実際に、作成したファイル「330-a.html」を全世界に公開するために、Web サーバー（WWW サ
ーバーとも言います）にファイルをアップロードします。（アップロード・ダウンロードの手続き
を「FTP 転送」と言います。）
（↓図１１）
※最初に「ファイル転送設定」画面が表示されるので、ここで 330-A の Web サーバーに接続するた
めのプロファイルを設定します。
「サーバープロファイル名」---自分でわかりやすい名前を自由入力
「ログイン情報の設定」---「接続先のサーバー名」
「ユーザーID」
「パスワード」の３つについては
サーバー管理者から付与された情報を入力
（↓図１２）
クリック
5/10
＜ファイルの転送作業＞
※（図１２）の後に、ファイル転送画面が表示されます。まず、左側の画面（パソコン内を表示する画
面）で、転送（アップロード）するファイルを表示させておきます。
次に、上の「接続」ボタンをクリックし、Web サーバーに実際にアクセスします。
（↓図１３）
クリック
※Web サーバーに接続されると、右側にサーバーの中身が表示され、左下には接続完了のメッセージ
が表示されます。
（↓図１４）
6/10
※サーバーへ転送するファイルを選択（クリック）した後、上向きの矢印ボタンをクリックします。
パソコンに保存されていた「330-a.htm」が、サーバーに転送されたことを確認します。
（↓図１５）
クリック
※画像も（図１５）と同様の操作にて転送し、転送作業が全て終了したら、
「切断ボタン」をクリック
して、サーバーとの接続を切断します。
（↓図１６）
クリック
7/10
＜ブラウザ（Internet Explorer 等）にてインターネットにファイルが公開されていることを確認＞
※転送したファイルが全世界に公開されているかどうか、また、入力したページタイトルが正確に表示
されているかどうか、実際にブラウザで確認してみます。
（ＵＲＬ（ホームページアドレス欄には、サーバー名の後をスラッシュ（／）で区切り、転送したｈｔ
ｍファイルの名前を入力します。
注意点：ここではサーバー直下にファイルを転送しましたが、サーバーの中にフォルダが何階層にも渡
って存在することもあるので、その場合は、フォルダごとにスラッシュで区切っていきます。）
（↓図１７）
8/10
Ⅲ
ファイルの更新
①更新する HTM ファイルをサーバからダウンロード
※先ほどアップロードした「330-a.htm」を修正してみます。
右側（サーバー側）の「330-a.htm」を選択し、下向きの青い矢印ボタンをクリックして、サーバー
にある最新ファイルをパソコンにダウンロードします。
（↓図１８）
クリック
②更新（修正）作業
＜ホームページビルダー起動と更新ファイル選択＞
※ホームページビルダーを起動し、「新規作成ボタン」の隣の「開くボタン」をクリックします。
（↓図１９）
クリック
9/10
※更新（修正）するファイル「330-a.htm」をクリックし、「開く」をクリックします。
（↓図２０）
クリック
＜更新（修正）作業＞
※作業画面にてファイルの更新をします。ここでは「おしらせ」という文字を入れてみます。
更新作業が終了したら、フロッピーディスクのアイコンのボタン（「保存ボタン」）をクリックします。
これで「330-a.htm」ファイルがパソコン上で上書きされました。
（↓図２１）
クリック
③更新（修正）した「330-a.htm」ファイルを Web サーバーにアップロード（上書き）
※（図１１）～（図１６）と同様の手続きにて、ファイルの上書きをします。
（既にサーバープロファイルが登録されているので、図１２の「プロファイル設定」画面は省かれます。）
10/10