ホームページ作成（題材：学校）
ホームページ・ビルダー 10 対応

作成例※ フ ォ ル ダ 名 ： 「 school 」◆ １ ペ ー ジ 目 （ index ）◆２ページ目（行事紹介）

index.html［挿入］－［ロゴ］
gyouji.html◆３ページ目（写真集）［挿入］－ ［画像の効果］－［アルバム］［挿入］－ ［画像の効果］－［サムネイル］

photo.html-1-１ページ目（ index のページ）の作成
１

標準モードで新しいファイルを開きます。

２

ページのタイトルを設定します。

①［編集］－［ページの属性］② タ イ ト ル を 入 力 し て ［ OK ］ ボ タ ン を ク リ ッ ク

ここにページタイトルが表示されます
３

学校名のロゴを挿入します。

①［挿入］－［ロゴ］②学校名を入力します。

-2-

③［背景の設定］ボタンをクリックします。

④適当な背景を選択して［完了］ボタンをクリックします。

⑤文字の大きさを調整します。

⑥［完了］ボタンをクリックします。

⑦クリックして選択状態にします。
⑧［中央揃え］アイコンをクリックして，ロゴを中心にそろえます。

-3-

４

水平線を挿入します。

①挿入したい場所をクリック

５②［挿入］－［水平線］

画像を挿入します。
①［素材］タブを選択します。

②適当なフォルダを選択します。

③適当な画像を編集領域にドラッグ＆ドロップします。

④ハンドルをドラッグすると大きさを変えることができます。

-4-

⑤画像の大きさを縮めた場合は必ず次の操作を行っておきます。（この操作をしないと，見かけは小さな写真なのに，重いデータを送信することになります。）
画像の上で右ボタンクリック→［画像を編集］－［画像の編集］⑥「表示サイズで保存」にチェックを入れて［ＯＫ］ボタンをクリック⑦［中央揃え］アイコンをクリックして，画像を中央に揃えておきます。

６「行事案内」，「写真集」という文字を入力します。
［ Shift ］ キ ー ＋ ［ Enter ］ キ ー で 改 行 （ 改 段 落 に な り ま す 。 ）

-5-

７

文字の大きさ・太さなどを調整します。

（フォントの種類は変えない方がいいです。ホームページを見る側のパソコン環境に依存するからです。また，この場合だけですが，この文字に対してリンクの設定をするので，文字色も変更しないでください。）①編集したい文字をドラッグして選択します。
②［書式］－［フォント］③ 文 字 サ イ ズ ・ 文 字 飾 り 等 指 定 し て ［ OK ］ ボ タ ン を ク リ ッ ク し ま す 。

④［中央揃え］アイコンをクリックして，画像を中央に揃えておきます。

-6-

８

名前を付けて保存します。

①［ファイル］－［名前を付けて保存］②保存したいドライブまたはフォルダを開きます。
③［新規フォルダ作成］アイコンをクリック④ 「 school 」 と い う フ ォ ル ダ 名 を 入 力 し ま す 。 （ 必 ず 半 角 英 字 で 入 力 ）⑤ ［ Enter ］ キ ー を 押 し て フ ォ ル ダ 名 を 確 定 し ま す 。
⑥［開く］ボタンをクリックします。

-7-

⑦ 「 index 」 と い う フ ァ イ ル 名 を 入 力 し ま す 。 （ 必 ず 半 角 英 字 で 入 力 ）⑧［保存］ボタンをクリックします。

⑨内容を確認して［保存］ボタンをクリックします。

９

背景画像を挿入します。
①［素材］タブを選択します。

②［壁紙用素材］を選択します。

③適当な壁紙を選んで編集領域へドラッグ＆ドロップします。

-8-

10

上書き保存をします。

①［ファイル］－［上書き保存］

11②内容を確認して［保存］ボタンをクリックします。

できあがったファイルを確認します。
【プレビュー】［プレビュー］タブをクリックします。

【 ブ ラ ウ ザ （ InternetExplorer ） 】［ InternetExplorer の 起 動 ］ ア イ コ ン をクリックします。

-9-

２ページ目（行事案内のページ）の作成
１

標準モードで新規ページを作成します。
［ファイル］－［標準モードで新規作成］

２

ページタイトルを設定します。

①［編集］－［ページの属性］②「行事案内」と入力します。

③ ［ OK ］ ボ タンをクリックします。

３

編集領域に「行事案内」と入力し，「見出し２」に設定します。

①入力②［属性］タブを選択します。

③［見出し２］を選択します。

- 10 -

４

文字を中央揃えにします。
［中央揃え］アイコンをクリックします。

５

リストマークを挿入します。
①［素材］タブを選択します。
②［リストマーク］を選択します。

③適当な画像を選んで編集領域へドラッグ＆ドロップします。

６

表を挿入します。

①［表］－［表の挿入］②３行２列に設定します。

③その他の設定を確認します。

④ ［ OK ］ ボ タ ン を ク リ ッ ク し ま す 。

- 11 -

７

次の図のように文字を入力します。

８

１行だけ追加してみます。

［表］－［行の追加］－［下へ１行追加］

９

２行以上まとめて追加するには次のようにします。

①［表］－［指定して追加］②［行］ボタンをクリック③ ど ち ら か を
選択④行数を入力⑤ ［ OK ］ ボ タンをクリック- 12 -

10

次の図のように文字を入力します。

11

列を追加します。
①「月」を入れたセルを選択

12②［表］－［列の追加］－［右へ１列追加］

画像を挿入します。
①［素材］タブを選択②［イラスト］を選択③適当なフォルダを選択④適当な画像を編集領域へ
ドラッグ＆ドロップ13

画像の入った列を中央揃えにします。
①ドラッグして選択②［中央揃え］アイコンをクリック- 13 -

14

表を中央揃えにします。

① 表 の 右 側 の 編 集 領 域 を ク リ ッ ク （ こ う す る と ， 表 全 体 が ピ ン ク 色 の 枠 で 囲 ま れ ， "選 択 "状 態 になります。
②［属性］タブを選択③「位置揃え」を［中央揃え］にします。

15セルの結合をします。

①結合したいセル（一番上）を選択します。

②［表］－［セルを縦に結合］－［下のセルと結合］③もう一度繰り返し，３個のセルを結合します。

- 14 -

16

背景色の設定をします。

①編集領域の何もないところをクリックして選択します（表の横は×）。
②［属性］タブを選択します。

③［背景］を選択します。

④［その他］ボタンをクリックします。
⑤ 適 当 な 色 を 選 ん で ［ OK ］ ボ タ
ンをクリックします。

17

名前を付けて保存します。
①［ファイル］－［名前を付けて保存］② 「 school 」 フ ォ ル ダ を 選 択 し ます。
③ 「 gyouji 」 と い う 名 前 を つ け ます。
④［保存］ボタンをクリックします。

⑤保存ファイルの確認ダイアロ
グが表示されたら，［保存］ボタンをクリックします。

- 15 -

３ページ目（写真集）の作成
１

標準モードで新規ページを作成します。

［ファイル］－［標準モードで新規作成］

２

ページタイトルを設定します。

①［編集］－［ページの属性］②「写真集」と入力します。
③ ［ OK ］ ボ タ ン をクリックします。

３

編集領域に「写真集」と入力し，「見出し２」に設定します。
① 入 力②［属性］タブを選択します。

③［見出し２］を選択します。

- 16 -

４

文字を中央揃えにします。

［中央揃え］アイコンをクリックします。

５

リストマークを挿入します。
①［素材］タブを選択します。
②［リストマーク］を選択します。

③適当な画像を選んで編集領域へドラッグ＆ドロップします。

６

区切り線（画像ファイル）を挿入します。
①［素材］タブを選択します。

②［区切り線］を選択します。

③適当な画像を選んで編集領域へドラッグ＆ドロップします。
７

区切り線を中央揃えにします。
①画像ファイルをクリックして選択状態にします。
②［中央揃え］アイコンをクリック- 17 -

８

区切り線の下に「校庭の花」と入力し，［見出し３］に設定し，中央揃えにします。

９「アルバム」を挿入します。

①挿入したい場所をクリックします。
②［挿入］－［画像の効果］－［アルバム］③サンプルの写真が入っているフォルダを選択します。
（ ホ ー ム ペ ー ジ ビ ル ダ ー が イ ン ス ト ー ル さ れ て い る フ ォ ル ダ ） － Program
Files － IBM Homepage Builder V10 － sample － image － photo － plants④適当な写真を２枚，クリックして選択します。

⑤［次へ］ボタンをクリックします。

- 18 -

⑥［写真を左に，文を右に配置する］を選択します。

②［次へ］ボタンをクリックします。

⑧アルバムの配置を確認［中央揃え］にします。

⑨［完了］ボタンをクリックします。

10

表に適当な説明文を入力します。

ダブルクリック【例】- 19 -

６

区切り線（画像ファイル）を挿入し，中央揃えにします。
①［素材］タブを選択します。
②［区切線］を選択します。
③適当な画像を選んで編集領域へドラッグ＆ドロップします。
④［中央揃え］アイコンをクリック

７ 「修学旅行写真集」というサブタイトルを入力して［見出し３］に設定し，中央揃えにします。

８「サムネイル」を挿入します。

①［挿入］－［画像の効果］－［サムネイル］- 20 -

② ［ photo ］ フ ォ ル ダ よ り ， 適 当 な 写 真 を ５ 枚 選 び ま す ク リ ッ ク し て 選 択 し ま す 。

③［次へ］ボタンをクリックします。

④サムネイルの大きさと配置，サムネイルの配置を設定します。

⑤［次へ］ボタンをクリックします。

⑥［完了］ボタンをクリックします。

９［プレビュー］画面で確認します。

クリック- 21 -

10「 school 」 フ ォ ル ダ に 「 photo.html 」 と い う 名 前 で 保 存 し ま す 。

①［ファイル］－［名前を付けて保存］② 「 photo 」 と 入 力 し て ［ 保 存 ］ ボ タ ン をクリックします。

③［保存］ボタンをクリックします。

リンクの設定１ 「 index.html 」 フ ァ イ ル を 開 き ま す 。
① ［ フ ァ イ ル ］ － ［ 開 く ］ … … … ［ school ］ フ ォ ル ダ － ［ index.html ］②「行事予定」をドラッグして選択状態にします。

- 22 -

③［挿入］－［リンク］④［参照］ボタンをクリック⑤ ［ school ］ フ ォ ル ダ の 「 gyoji.html 」⑦ ［ OK ］ ボ タ ン を ク リ ッ クを選択⑥［開く］ボタンをクリック

２

１ と 同 様 に し て ， 「 写 真 集 」 か ら ， 「 photo.html 」 フ ァ イ ル へ の リ ン ク の 設 定 を し ま す 。

３

上書き保存します。

４「 gyoji.html 」 を 開 き ， 「 も ど る 」 と い う 文 字 を 入 力 し て １ と 同 様 に ， 「 index.html 」 へ の リ ン ク を 設［ファイル］－［上書き保存］

定し，上書き保存します。

- 23 -

５「 photo.html 」 を 開 き ４ と 同 様 に ， 「 index.html 」 へ の リ ン ク を 設 定 し ， 上 書 き 保 存 し ま す 。

- 24 -