初めて作る家庭クラブのホームページ
WindowsXP ， IBM ホームページ・ビルダー 10 対応

ホームページビルダーの起動
１ ［スタート］ボタンをクリックして，［すべてのプログラム］－［ IBM ホームページ・ビルダー 10 ］－［ホームページ・ビルダー］を選択します。

２ ［スタンダード］を選択して，［ OK ］ボタンをクリックします。

１ページ目（index のページ）の作成
ファイルの新規作成とタイトルの設定
１ 標準モードで新しいファイルを開きます。

２ ページのタイトルを設定します。
①［編集］－［ページの属性］を選択②タイトル（家庭クラブ名）を入力して［ OK ］ボタンをクリック

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

ロゴの挿入
１ 家庭クラブ名の“ロゴ”を作成します。
①［ロゴの挿入］アイコンをクリック②家庭クラブ名を入力③［背景の設定］ボタンをクリック④適当な背景を選択して［完了］ボタンをクリック⑤文字のデザインを選択

⑥文字の大きさを調整して，［完了］ボタンをクリック

２ “ロゴ”を”クリックして選択状態にし，［中央揃え］アイコンをクリックし，中央に揃えます。

ハンドル（ ■ ）がついた状態水平線の挿入
１

水平線を挿入したい場所を選択して，［水平線の挿入］アイコンをクリックします。

画像の挿入家庭クラブのイメージに合う画像を選んで挿入します
１ ［素材］タブを選択します。

２ 適当なフォルダを選択し，画像を選んで編集領域へドラッグ＆ドロップします。
選択例［写真］をクリックロップ→［食べ物］をクリック→

適当な画像を選択→

編集領域へドラッグ＆ド２ 画像が大きすぎる場合は，ハンドル（■）をドラッグして大きさを変えます。
（小さい画像を引き延ばすと，画質が低下します。）

３

画像を小さくした場合は，次の操作をします（この操作をしないと，見かけは小さな写真なのに，重いデータを送信することになります）。
①

画像の上で右ボタンクリック→［画像を編集］－［画像の編集］②「表示サイズで保存」にチェックを入れて［ＯＫ］ボタンをクリック

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

目次の挿入
１ 「行事予定」という文字を入力します。

２ ［ Shift ］キー＋［ Enter ］キーで改段落し，「写真集」という文字を入力します。

文字の大きさ・太さなどの調整
フォントの種類は変えない方がいいです。ホームページを見る側のパソコン環境に依存するからです。また，リンクの設定をする予定の文字の色も，変更しないでください。
１ 編集したい文字をドラッグして選択します。

２ ［文字サイズ拡大］アイコンを何度かクリックして，文字を適度に大きくします。

（大きくしすぎたら［文字サイズ縮小］をクリック）※ 太字や斜体にすることもできます。

太字斜体

３ 必要に応じて，文字を中央に揃えます。

背景画像の挿入１［素材］タブを選択し，［壁紙用素材］を選択して，適当な壁紙をクリックして選び，編集領域へドラッグ＆ドロップします。

名前を付けて保存
１ ［ファイル］メニューより－［名前を付けて保存］を選択します。

２ 次のような手順で名前を付けて保存します。
①保存したいドライブまたはフォルダを開く②［新規フォルダ作成］アイコンをクリック③「 kateiclub 」というフォルダ名を入力して［ Enter ］キーを押す（必ず半角英字で入力）→「 kateiclub 」フォルダを選択した（青く反転）状態で［開く］ボタンをクリック④「 index 」というファイル名を入力（必ず半角英字で入力）して，［保存］ボタンをクリック

⑤内容を確認して，［保存］ボタンをクリック

できあがったファイルの確認【プレビュー】［プレビュー］タブをクリック【ブラウザ（InternetExplorer）】［ InternetExplorer の起動］アイコンをクリックします。

２ページ目（行事案内のページ）の作成
標準モードで新規ページを作成［ファイル］－［標準モードで新規作成］

ページタイトルの設定①［編集］－［ページの属性］②「行事予定」と入力し，［ OK ］ボタンをクリック

見出しの設定編集領域に「行事予定」と入力し、「見出し１」に設定します。
①入力

カーソルはこの行においておきます。

②［段落の挿入／変更］ドロップダウンリストより［見出し１］を選択します。

文字の中央揃え［中央揃え］アイコンをクリックします（カーソルは「行事予定」と入力した行においておきます）。

５

リストマークの挿入
１ リストマーク用の画像が入ったフォルダを選択します。
①［素材］タブを選択します。

②［リストマーク］を選択します。

どちらかを選択

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

※［アニメーション］－［リストマーク］を選んだ場合，［プレビュー］タブを選択すると，動いている様子が確認できます。

動く見出しの設定
１ 「行事予定」と入力したところより，下の空白部分をクリックします。（または， Shift キー＋ Enter キー。新しい段落の入力待状態になります。 Enter キーを押すだけだと，［改行］になります。）

２ 「１学期」（または「前期」）と入力し，［見出し２］に設定します。

インデントの設定「１学期」と入力した行を，クリックします。次に，［インデント］アイコンをクリックします。

表の挿入
１ ［表の挿入］アイコンをクリックします。

２

３行２列に設定します。

その他の設定も確認［ OK ］ボタンをクリック

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

行の追加
１

表の一番下の行をクリックして選択しておきます。次に，［行の追加］アイコンをクリックして，１行追加します。

２ １と同様の操作で，さらに１行下に追加します。

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

列の追加「月」を入れたセルを選択して，［列の追加］アイコンをクリックします。

画像の挿入［素材］タブ－［イラスト］の中の適当なフォルダを選択し，適当な画像を選んで編集領域へドラッグ＆ドロップします。

【作成例】

表の中央揃え１ 列を中央揃えにします。
①

中央揃えにしたいセルをドラッグして選択し，［中央揃え］アイコンをクリック

２ 表全体を中央揃えにします。
①表の右側の編集領域をクリック（こうすると，表全体がピンク色の枠で囲まれ，"選択"状態になります。
②［中央揃え］アイコンをクリック

セルの結合「８月」と，その下のセルを結合します。
結合したいセル（一番上）を選択して，［下のセルと結合］アイコンをクリックします。

箇条書き
１ 「家庭クラブ連盟 県大会」のセルに，箇条書きの項目を入れます。
①

セルをクリックして選択し，［指定して挿入］アイコンをクリック③

適当なマークを選択して［ OK ］ボタンをクリック④

適当な項目を入力

２ 「テーマ１」と「テーマ２」をドラッグして選択し，［インデント］アイコンをクリックします。

３ 「全国大会」についても，同様に入力します。

文字色の設定
１ 「１学期」の文字をドラッグして選択し，［カラーパレットの表示／非表示］アイコンをクリックします。

２ 適当な色を選択し，［適用］ボタンをクリックします。

背景色の設定１

編集領域の何もないところをクリックして選択し（表の横は×），［カラーパレットの表示／非表示］アイコンをクリックします。

２ 適当な背景色を選択し，［適用］ボタンをクリックします。

セルの背景色の設定
背景色を変えたいセルを選択して，［カラーパレット］タブより適当な色を選んで，［適用］ボタンをクリックします。

名前を付けて保存
１ ［ファイル］メニューより［名前を付けて保存］を選択します。

２ 次のような手順で名前を付けて保存します。
①「 kateiclub 」フォルダを選択し，「 gyouji 」という名前をつけて，［保存］ボタンをクリックします。

②

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

３ページ目（写真集）の作成
標準モードで新規ページ作成［ファイル］メニューより，［標準モードで新規作成］を選択します。

ページタイトルの設定［編集］－メニューより，［ページの属性］を選択し，「写真集」と入力して，［ OK ］ボタンをクリックします。

見出し設定
編集領域に「写真集」と入力し、「見出し１」に設定します（［段落の挿入／変更］ドロップダウンリストより［見出し１］を選択）。

中央揃え「写真集」の段落を選択し，［中央揃え］アイコンをクリックして，文字を中央に揃えます。

リストマークの挿入［素材］タブの「リストマーク」のフォルダより，適当なものを選んで，「写真集」の文字の前にリストマークを付けます。

【作成例】

区切り線（画像ファイル）の挿入
１［素材］タブより，［区切り線］フォルダを選択し，適当な画像を選んで編集領域へドラッグ＆ドロップします。

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

見出しの設定・中央揃え・文字色変更「家庭クラブ週間」というサブタイトルを入力し，「見出し２」・「中央揃え」に設定して，適当な文字色に変更します。

「アルバム」の挿入
１ 「アルバム」を挿入したい場所をクリックします。

２ ［挿入］メニューより，［画像の効果］－［アルバム］を選択します。

３ ダイアログで次のように設定します。
① サンプルの写真が入っているフォルダを選択②

適当な写真を２枚、クリックして選択し，［次へ］ボタンをクリック（ホームページビルダーがインストールされている フ ォ ル ダ ） － Program Files － IBMHomepage Builder V10 － sample － image－ photo － plants

③［写真を左に、文を右に配置する］を選択し，［次へ］ボタンをクリック④

アルバムの配置を確認［中央揃え］にし，［完了］ボタンをクリック

４ 表中の文字をダブルクリックして選択し，適当な説明文に置き換えます。

【作成例】

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

見出しの設定「家庭クラブ県大会」というサブタイトルを入力して［見出し２］に設定し、中央揃えにします。

８ 「サムネイル」の挿入
１「サムネイル」を挿入したい場所をクリックして選択します。

２［挿入］メニューより，［画像の効果］－［サムネイル］を選択します。

３

ダイアログで次のように設定します。
①［ photo ］フォルダより，適当な写真を５枚，クリックして選択し，［次へ］ボタンをクリック②

サムネイルの大きさと配置、サムネイルの配置を設定し，［次へ］ボタンをクリック③［完了］ボタンをクリック［プレビュー］画面で確認［プレビュー］タブをクリックします。

サムネイル（小さな写真）をクリック
すると，大きな写真が表示されます★壁紙，背景色等，自由に設定してください。

名前をつけて保存
１ ［ファイル］メニューより，［名前を付けて保存］を選択し，「 kateiclub 」フォルダに，「 photo 」という名前で保存します。

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

リンクの設定１ 「 index.html 」ファイルを開きます。
［ファイル］メニューより［開くを選択します。

２ ［ kateiclub ］フォルダより［ index.html ］を選択して，［開く］ボタンをクリックします。

３ 「行事予定」をドラッグして選択状態にし，［リンクの挿入］アイコンをクリックします。

４ ダイアログで次のように設定します。
①［参照］ボタンをクリック②［ kateiclub ］フォルダの「 gyouji.html 」を選択して，［開く］ボタンをクリック③ ［ OK ］ボタンをクリック

５ ３～４と同様にして，「写真集」という文字から，「 photo.html 」ファイルへのリンクの設定をします。
６ 上書き保存します。（［ファイル］－［上書き保存］）７

１～４と同様にして，「 gyoji.html 」を開き，「もどる」という文字を入力して，選択状態にし，［リンクの設定］アイコンをクリックします。

８ 次のようにリンクを設定します。
①［参照］ボタンをクリック③［ OK ］ボタンをクリック②「 index.html 」を選択して［開く］ボタンをクリック

９ 上書き保存します。（［ファイル］－［上書き保存］）10 「 photo.html 」を開き，「もどる」という文字を入力して「 gyouji.html 」ファイルと同様に，「 index.html 」へのリンクを設定し，上書き保存します。

11 リンクの確認をしてみましょう。
【プレビュー】画面の場合【Internet Explorer】の場合※参考 画像ファイルからのリンク
１ ［素材］タブの［ボタン］フォルダより，「 BACK 」・「戻る」等の画像を選んで，編集領域へドラッグ＆ドロップします。

２ 「戻る」等の画像をクリックして選択し，［リンクの挿入］アイコンをクリックします。

※参考 作成例