< F2D89C692EB834E CC837A815B B83578DEC>

Transcription

1 初 めて 作 る 家 庭 クラブのホームページ ホームページビルダーの 起 動 WindowsXP, IBM ホームページ ビルダー 10 対 応 1 [スタート]ボタンをクリックして,[すべてのプログラム]-[ IBM ホームページ ビルダー 10 ]-[ホームペ ージ ビルダー]を 選 択 します 2 [スタンダード]を 選 択 して,[ OK ]ボタンをクリックします 1ページ 目 ( index のページ)の 作 成 ファイルの 新 規 作 成 とタイトルの 設 定 1 標 準 モードで 新 しいファイルを 開 きます 2 ページのタイトルを 設 定 します 1[ 編 集 ]-[ページの 属 性 ]を 選 択 2タイトル( 家 庭 クラブ 名 )を 入 力 して[ OK ]ボタンをクリック

2 ここにページタイトルが 表 示 されます ロゴの 挿 入 1 家 庭 クラブ 名 の ロゴ を 作 成 します 1[ロゴの 挿 入 ]アイコンをクリック 2 家 庭 クラブ 名 を 入 力 3[ 背 景 の 設 定 ]ボタンをクリック 4 適 当 な 背 景 を 選 択 して[ 完 了 ]ボタンをクリック 5 文 字 のデザインを 選 択

3 6 文 字 の 大 きさを 調 整 して,[ 完 了 ]ボタンをクリック 2 ロゴ を クリックして 選 択 状 態 にし,[ 中 央 揃 え]アイコンをクリックし, 中 央 に 揃 えます ハンドル( )が ついた 状 態 水 平 線 の 挿 入 1 水 平 線 を 挿 入 したい 場 所 を 選 択 して,[ 水 平 線 の 挿 入 ]アイコンをクリックします

4 画 像 の 挿 入 家 庭 クラブのイメージに 合 う 画 像 を 選 んで 挿 入 します 1 [ 素 材 ]タブを 選 択 します 2 適 当 なフォルダを 選 択 し, 画 像 を 選 んで 編 集 領 域 へドラッグ&ドロップします 選 択 例 [ 写 真 ]をクリック [ 食 べ 物 ]をクリック 適 当 な 画 像 を 選 択 編 集 領 域 へドラッグ&ド ロップ

5 2 画 像 が 大 きすぎる 場 合 は,ハンドル( )をドラッグして 大 きさを 変 えます ( 小 さい 画 像 を 引 き 延 ばすと, 画 質 が 低 下 します ) 3 画 像 を 小 さくした 場 合 は, 次 の 操 作 をします(この 操 作 をしないと, 見 かけは 小 さな 写 真 なのに, 重 いデータ を 送 信 することになります) 1 画 像 の 上 で 右 ボタンクリック [ 画 像 を 編 集 ]-[ 画 像 の 編 集 ] 2 表 示 サイズで 保 存 にチェックを 入 れて[OK]ボタンをクリック

6 4 必 要 に 応 じて,[ 中 央 揃 え]アイコンをクリックして, 画 像 を 中 央 に 揃 えておきます 目 次 の 挿 入 1 行 事 予 定 という 文 字 を 入 力 します 2 [ Shift ]キー+[ Enter ]キーで 改 段 落 し, 写 真 集 という 文 字 を 入 力 します 文 字 の 大 きさ 太 さなどの 調 整 フォントの 種 類 は 変 えない 方 がいいです ホームページを 見 る 側 のパソコン 環 境 に 依 存 するからです ま た,リンクの 設 定 をする 予 定 の 文 字 の 色 も, 変 更 しないでください 1 編 集 したい 文 字 をドラッグして 選 択 します 2 [ 文 字 サイズ 拡 大 ]アイコンを 何 度 かクリックして, 文 字 を 適 度 に 大 きくします ( 大 きくしすぎたら[ 文 字 サイズ 縮 小 ]をクリック)

7 太 字 や 斜 体 にすることもできます 太 字 斜 体 3 必 要 に 応 じて, 文 字 を 中 央 に 揃 えます 背 景 画 像 の 挿 入 1 [ 素 材 ]タブを 選 択 し,[ 壁 紙 用 素 材 ]を 選 択 して, 適 当 な 壁 紙 をクリックして 選 び, 編 集 領 域 へドラッグ&ドロ ップします

8 名 前 を 付 けて 保 存 1 [ファイル]メニューより-[ 名 前 を 付 けて 保 存 ]を 選 択 します 2 次 のような 手 順 で 名 前 を 付 けて 保 存 します 1 保 存 したいドライブまたはフォルダを 開 く 2[ 新 規 フォルダ 作 成 ]アイコンをクリック 3 kateiclub というフォルダ 名 を 入 力 して[ Enter ]キーを 押 す ( 必 ず 半 角 英 字 で 入 力 ) kateiclub フォルダを 選 択 した( 青 く 反 転 ) 状 態 で[ 開 く]ボタンをクリック 4 index というファイル 名 を 入 力 ( 必 ず 半 角 英 字 で 入 力 )して,[ 保 存 ]ボタンをクリック

9 5 内 容 を 確 認 して,[ 保 存 ]ボタンをクリック できあがったファイルの 確 認 プレビュー [プレビュー]タブをクリック ブラウザ( InternetExplorer) [ InternetExplorer の 起 動 ]アイコンをクリックします

10 2ページ 目 ( 行 事 案 内 のページ)の 作 成 標 準 モードで 新 規 ページを 作 成 [ファイル]-[ 標 準 モードで 新 規 作 成 ] ページタイトルの 設 定 1[ 編 集 ]-[ページの 属 性 ] 2 行 事 予 定 と 入 力 し,[ OK ]ボタンをクリック 見 出 しの 設 定 編 集 領 域 に 行 事 予 定 と 入 力 し 見 出 し1 に 設 定 します 1 入 力 カーソルはこの 行 においておきます 2[ 段 落 の 挿 入 / 変 更 ]ドロップダウンリストより[ 見 出 し1]を 選 択 します

11 文 字 の 中 央 揃 え [ 中 央 揃 え]アイコンをクリックします(カーソルは 行 事 予 定 と 入 力 した 行 においておきます) 5 リストマークの 挿 入 1 リストマーク 用 の 画 像 が 入 ったフォルダを 選 択 します 1 [ 素 材 ]タブを 選 択 します 2 [リストマーク]を 選 択 します どちらかを 選 択 2 適 当 な 画 像 を 選 んで 編 集 領 域 へドラッグ&ドロップします [アニメーション]-[リストマーク]を 選 んだ 場 合,[プレビュー]タブを 選 択 すると, 動 いている 様 子 が 確 認 できます 動 く

12 見 出 しの 設 定 1 行 事 予 定 と 入 力 したところより, 下 の 空 白 部 分 をクリックします (または, Shift キー+ Enter キー 新 し い 段 落 の 入 力 待 状 態 になります Enter キーを 押 すだけだと,[ 改 行 ]になります ) 2 1 学 期 (または 前 期 )と 入 力 し,[ 見 出 し2]に 設 定 します インデントの 設 定 1 学 期 と 入 力 した 行 を,クリックします 次 に,[インデント]アイコンをクリックします 表 の 挿 入 1 [ 表 の 挿 入 ]アイコンをクリックします 2 3 行 2 列 に 設 定 します その 他 の 設 定 も 確 認 [ OK ]ボタンをクリック

13 3 次 の 図 のように 文 字 を 入 力 します 行 の 追 加 1 表 の 一 番 下 の 行 をクリックして 選 択 しておきます 次 に,[ 行 の 追 加 ]アイコンをクリックして,1 行 追 加 しま す 2 1と 同 様 の 操 作 で,さらに1 行 下 に 追 加 します 3 次 の 図 のように 文 字 を 入 力 します

14 列 の 追 加 月 を 入 れたセルを 選 択 して,[ 列 の 追 加 ]アイコンをクリックします 画 像 の 挿 入 [ 素 材 ]タブ-[イラスト]の 中 の 適 当 なフォルダを 選 択 し, 適 当 な 画 像 を 選 んで 編 集 領 域 へドラッグ&ドロップ します 作 成 例

15 表 の 中 央 揃 え 1 列 を 中 央 揃 えにします 1 中 央 揃 えにしたいセルをドラッグして 選 択 し,[ 中 央 揃 え]アイコンをクリック 2 表 全 体 を 中 央 揃 えにします 1 表 の 右 側 の 編 集 領 域 をクリック(こうすると, 表 全 体 がピンク 色 の 枠 で 囲 まれ, " 選 択 " 状 態 になります 2[ 中 央 揃 え]アイコンをクリ ック

16 セルの 結 合 8 月 と,その 下 のセルを 結 合 します 結 合 したいセル( 一 番 上 )を 選 択 して,[ 下 のセルと 結 合 ]アイコンをクリックします 箇 条 書 き 1 家 庭 クラブ 連 盟 県 大 会 のセルに, 箇 条 書 きの 項 目 を 入 れます 1 セルをクリックして 選 択 し,[ 指 定 して 挿 入 ]アイコンをクリック 3 適 当 なマークを 選 択 して[ OK ]ボタンをクリック 4 適 当 な 項 目 を 入 力

17 2 テーマ1 と テーマ2 をドラッグして 選 択 し,[インデント]アイコンをクリックします 3 全 国 大 会 についても, 同 様 に 入 力 します 文 字 色 の 設 定 1 1 学 期 の 文 字 をドラッグして 選 択 し,[カラーパレットの 表 示 / 非 表 示 ]アイコンをクリックします 2 適 当 な 色 を 選 択 し,[ 適 用 ]ボタンをクリックします

18 背 景 色 の 設 定 1 編 集 領 域 の 何 もないところをクリックして 選 択 し( 表 の 横 は ),[カラーパレットの 表 示 / 非 表 示 ]アイコン をクリックします 2 適 当 な 背 景 色 を 選 択 し,[ 適 用 ]ボタンをクリックします セルの 背 景 色 の 設 定 背 景 色 を 変 えたいセルを 選 択 して,[カラーパレット]タブより 適 当 な 色 を 選 んで,[ 適 用 ]ボタンをクリックしま す

19 名 前 を 付 けて 保 存 1 [ファイル]メニューより[ 名 前 を 付 けて 保 存 ]を 選 択 します 2 次 のような 手 順 で 名 前 を 付 けて 保 存 します 1 kateiclub フォルダを 選 択 し, gyouji という 名 前 をつけて,[ 保 存 ]ボタンをクリックします 2 保 存 ファイルの 確 認 ダイアログが 表 示 されたら,[ 保 存 ]ボタンをクリックします

20 3ページ 目 ( 写 真 集 )の 作 成 標 準 モードで 新 規 ページ 作 成 [ファイル]メニューより,[ 標 準 モードで 新 規 作 成 ]を 選 択 します ページタイトルの 設 定 [ 編 集 ]-メニューより,[ページの 属 性 ]を 選 択 し, 写 真 集 と 入 力 して,[ OK ]ボタンをクリックします 見 出 し 設 定 編 集 領 域 に 写 真 集 と 入 力 し 見 出 し1 に 設 定 します([ 段 落 の 挿 入 / 変 更 ]ドロップダウンリストより[ 見 出 し1]を 選 択 ) 中 央 揃 え 写 真 集 の 段 落 を 選 択 し,[ 中 央 揃 え]アイコンをクリックして, 文 字 を 中 央 に 揃 えます リストマークの 挿 入 [ 素 材 ]タブの リストマーク のフォルダより, 適 当 なものを 選 んで, 写 真 集 の 文 字 の 前 にリストマークを 付 けます 作 成 例

21 区 切 り 線 ( 画 像 ファイル)の 挿 入 1 [ 素 材 ]タブより,[ 区 切 り 線 ]フォルダを 選 択 し, 適 当 な 画 像 を 選 んで 編 集 領 域 へドラッグ&ドロップします 2 区 切 り 線 を 中 央 揃 えにします 画 像 ファイルをクリックして 選 択 状 態 にし,[ 中 央 揃 え]アイコンをクリックします 見 出 しの 設 定 中 央 揃 え 文 字 色 変 更 家 庭 クラブ 週 間 というサブタイトルを 入 力 し, 見 出 し2 中 央 揃 え に 設 定 して, 適 当 な 文 字 色 に 変 更 し ます アルバム の 挿 入 1 アルバム を 挿 入 したい 場 所 をクリックします

22 2 [ 挿 入 ]メニューより,[ 画 像 の 効 果 ]-[アルバム]を 選 択 します 3 ダイアログで 次 のように 設 定 します 1 サンプルの 写 真 が 入 っているフォルダを 選 択 2 適 当 な 写 真 を2 枚 クリックして 選 択 し, [ 次 へ]ボタンをクリック (ホームページビルダーがインストールされてい るフォルダ)- Program Files - IBM Homepage Builder V10 - sample -image - photo - plants

23 3 [ 写 真 を 左 に 文 を 右 に 配 置 する]を 選 択 し,[ 次 へ]ボタンをクリック 4 アルバムの 配 置 を 確 認 [ 中 央 揃 え]にし,[ 完 了 ]ボタンをクリック 4 表 中 の 文 字 をダブルクリックして 選 択 し, 適 当 な 説 明 文 に 置 き 換 えます

24 作 成 例 区 切 り 線 ( 画 像 ファイル)の 挿 入 [ 素 材 ]タブより[ 区 切 り 線 ]フォルダを 選 択 し, 適 当 な 画 像 を 選 んで 編 集 領 域 へドラッグ&ドロップします [ 中 央 揃 え]アイコンをクリックします

25 見 出 しの 設 定 家 庭 クラブ 県 大 会 というサブタイトルを 入 力 して[ 見 出 し2]に 設 定 し 中 央 揃 えにします 8 サムネイル の 挿 入 1 サムネイル を 挿 入 したい 場 所 をクリックして 選 択 します 2 [ 挿 入 ]メニューより,[ 画 像 の 効 果 ]-[サムネイル]を 選 択 します 3 ダイアログで 次 のように 設 定 します 1 [ photo ]フォルダより, 適 当 な 写 真 を5 枚,クリックして 選 択 し,[ 次 へ]ボタンをクリック

26 2 サムネイルの 大 きさと 配 置 サムネイルの 配 置 を 設 定 し,[ 次 へ]ボタンをクリック 3 [ 完 了 ]ボタンをクリック [プレビュー] 画 面 で 確 認 [プレビュー]タブをクリックします サムネイル( 小 さな 写 真 )をクリック すると, 大 きな 写 真 が 表 示 されます

27 壁 紙, 背 景 色 等, 自 由 に 設 定 してください 名 前 をつけて 保 存 1 [ファイル]メニューより,[ 名 前 を 付 けて 保 存 ]を 選 択 し, kateiclub フォルダに, photo という 名 前 で 保 存 します 2 [ 保 存 ]ボタンをクリックします リンクの 設 定 1 index.html ファイルを 開 きます [ファイル]メニューより[ 開 くを 選 択 します 2 [ kateiclub ]フォルダより[ index.html ]を 選 択 して,[ 開 く]ボタンをクリックします

28 3 行 事 予 定 をドラッグして 選 択 状 態 にし,[リンクの 挿 入 ]アイコンをクリックします 4 ダイアログで 次 のように 設 定 します 1 [ 参 照 ]ボタンをクリック 2[ kateiclub ]フォルダの gyouji.html を 選 択 して, [ 開 く]ボタンをクリック 3 [ OK ]ボタンをクリック

29 5 3~4と 同 様 にして, 写 真 集 という 文 字 から, photo.html ファイルへのリンクの 設 定 をします 6 上 書 き 保 存 します ([ファイル]-[ 上 書 き 保 存 ]) 7 1~4と 同 様 にして, gyoji.html を 開 き, もどる という 文 字 を 入 力 して, 選 択 状 態 にし,[リンクの 設 定 ] アイコンをクリックします 8 次 のようにリンクを 設 定 します 1 [ 参 照 ]ボタンをクリック 2 index.html を 選 択 して[ 開 く]ボタンをクリック 3 [ OK ]ボタンをクリック

30 9 上 書 き 保 存 します ([ファイル]-[ 上 書 き 保 存 ]) 10 photo.html を 開 き, もどる という 文 字 を 入 力 して gyouji.html ファイルと 同 様 に, index.html へ のリンクを 設 定 し, 上 書 き 保 存 します 11 リンクの 確 認 をしてみましょう プレビュー 画 面 の 場 合 Internet Explorer の 場 合 参 考 画 像 ファイルからのリンク 1 [ 素 材 ]タブの[ボタン]フォルダより, BACK 戻 る 等 の 画 像 を 選 んで, 編 集 領 域 へドラッグ&ドロップし ます

31 2 戻 る 等 の 画 像 をクリックして 選 択 し,[リンクの 挿 入 ]アイコンをクリックします 参 考 作 成 例