「ホームページビルダー」でのホームページ作成、公開方法

“パソコン教室”にて「ホームページビルダー」を使ったホームページの作成、公開例です。初心者向け。
ホームページビルダー（Ver11）は、全PC教室PCに入っています。


１．起動方法　　２．作成例　　３．プレビューでの確認　　４．保存（公開）方法　　５．ブラウザで確認

※「サイト機能」を使う場合、注意が必要です。「サイト機能の利用について」参照のこと。

１．起動方法

1.　デスクトップの

をダブルクリックして起動します。

2.下図のウィンドウが開くので、「スタンダード」を選択して「OK」ボタンをクリックします。
　　

3.ファイルメニューから「標準モードで新規作成」を選択します。
　　

4.白紙ページが表示されました。ここから作成作業に入ります。
　　

２．作成方法（例）

（2-1.文字の入力　　2-2.表の作成　　2-3.画像の挿入　　2-4.別ページへのリンク　　2-5.メールへのリンク）

2-1.文字の入力

1. 白紙部分をクリックし、文字を打ち込みます。
　　

2. 次に文字を大きくします。大きくしたい部分をドラッグし、黒く反転させます。
　　

3.　書式メニューから「サイズ」⇒変えたいサイズを選びます（ここでは+3を選択します）。→文字のサイズが大きくなります。

　　

→

　※同じ方法で文字を小さくすることもできます。
　　

4.次に、文字の色を変えます。変えたい部分をドラッグして黒く反転させます。
　　

5.書式メニューから「文字色」⇒変えたい色を選びます（ここでは赤を選択します）。→文字の色が変わりました。

　　

→

2-2.表の作成

1.表メニューから「表の挿入」を選択します。
　　

2.　入れたい表の行数、列数を入力します（ここでは4行4列にします）。
　　

3.表が挿入されました。※ツールバーからも行列の追加、削除を行うことができます。
　　

2-3.画像の挿入

1.挿入メニューから「画像ファイル」を選択します（ここでは素材集の画像ファイルを使います）。
　　

2.挿入したい画像を選択し、開くボタンをクリックします。
　　

3.画像が挿入されました。
　　

2-4.別ページへのリンク

1. まず、リンクを設定するための文字を入力します。
　ここでは、「YAHOO！」トップページへのリンクを設定します。
　　

2. 入力した文字をドラッグして反転させます。
　　

3. 「挿入」から「リンク」を選択します。
　　

4.「URLへ」のタブを選択し、リンク先URL（ここでは「www.yahoo.co.jp」）を入力したあと、「OK」を押します。
　　

5. 文字色が変わり、下線が付いてリンクが設定されました。
　　

2-5.メールへのリンク

1. まず、リンクを設定するための文字を入力します。
　　

2. 入力した文字をドラッグして反転させます。
　　

3. 「挿入」から「リンク」を選択します。
　　

4.「メールへ」のタブを選択し、宛先（「ユーザID@tku.ac.jp」など）を入力したあと、「OK」を押します。
　　

5. 文字色が変わり、下線が付いてメールリンクが設定されました。
　　

３．プレビューでの確認方法

「プレビュー」タブをクリックすると、表示イメージを確認することができます。
作成しながら、随時確認することをお勧めします。

４．保存（公開）方法

1.ファイルメニューから「名前をつけて保存」を選択します。
　　

2.「名前をつけて保存」のウィンドウが開きますので、Uドライブ（ホームディレクトリ（tkuseruve）’のユーザID）を選択します。
　　

★Uドライブ直下にwwwフォルダが無い方は→3へ。ある方は→5へ。

3.「新しいフォルダの作成」ボタンを押します（下図参照）。
　　

4.「新しいフォルダ」が作成されますので、フォルダ名を「www」に変更します。
　　

5.変更後、「www」フォルダを開き、そこにファイルを保存します。TOPページのファイル名はindex.htmlがお勧めです。
　［保存］＝［アップロード完了］を意味します。
　　

　※画像を貼り付けている場合、上記保存時に以下のようなウィンドウがでます。
　　ファイル名をわかりやすいものに変更し、保存ボタンをクリックします。
　　

５．IE（ブラウザ）での確認方法

1.デスクトップの

をダブルクリックして「Internet Explorer」を起動ます。

2.アドレス（URL）欄に以下のように指定します。

　　例．ユーザID=05b9999の方の場合
　　　　　http://www.tku.ac.jp/~05b9999/index.html　　　※index.htmlは省略可能です。
　　

3.自分のホームページが表示されました！
　　

　　※「ページが見つかりません」と表示された場合は、ファイル名、URL名を再確認して下さい。

情報システム課TOPへ