社会と情報 SJ5-01

1/4
社会と情報 SJ5-01
担当／脇本
■授業の流れ■
① ホームページビルダー を使用して簡単な自己紹介のホームページ作成。
② ｲﾝﾀｰﾈｯﾄｴｸｽﾌﾟﾛｰﾗｰ(以下 IE と略)でﾎｰﾑﾍﾟｰｼﾞが表示されることを確認する。
③ 作成した HTML ﾌｧｲﾙ・素材ﾌｧｲﾙは「1-#」(#：組)ﾌｫﾙﾀﾞ内のﾌｫﾙﾀﾞに保存。
１．自分の専用フォルダを作成する。
[1] <スタート> → コンピュータ → Data（D：）ｸﾘｯｸ → 「社会と情報」ﾌｫﾙﾀﾞ
[2] 「1-#」ﾌｫﾙﾀﾞをﾀﾞﾌﾞﾙｸﾘｯｸ <新しいフォルダ>
・「新しいフォルダ」というフォルダ名を，以下の通りに変更（全部 半角小文字）
=>
hp1#**shinyo-taro
hp + 1#（1 年#組) + **：自分の出席№(2 桁) + 自分の名前（ｱﾙﾌｧﾍﾞｯﾄ）姓 + “-“(ﾊｲﾌﾝ) + 名
例 1 年 9 組 99 番 新陽太郎 の場合 =>
hp1999shinyo-taro
・以下ﾎｰﾑﾍﾟｰｼﾞ用のﾌｫﾙﾀﾞ名，ﾌｧｲﾙ名は この新陽太郎の例で説明する。
２．ホームページ作成
・作成するホームページのモデルページ（右図）参考にする。
・先生から各生徒 PC に画像表示する。
・モデルページと全く同じ背景・素材や画像を選択しなくてもよい。
・テーマは「自己紹介」
・IBM ホームページビルダー を起動
<<ホームページビルダーの起動
[1] <スタート> → <すべてのプログラム> ｸﾘｯｸ
[2] <ホームページ・ビルダー16> → <ホームページ・ビルダー16> ｸﾘｯｸ
・ホームページ（HTMLﾌｧｲﾙ）の作成準備
<<ページ新規作成・素材ビューの表示
[1] ページ新規作成
・<ファイル> →
<どこでも配置モードで新規作成> クリック
・壁紙（背景）やロゴ，画像，アニメーションの挿入などほとんどが左側の ナビメニュー または右側の [素材]
タブから選択する。
2/4
・今回のホームページで取り組む内容
①壁紙の設定
・[素材]タブ → 壁紙用素材 → 画像ファイル選択(ﾀﾞﾌﾞﾙｸﾘｯｸ) または <挿入>
②ホームページの保存
[1] <ファイル> → <名前を付けて保存> クリック
[2]「名前を付けて保存」ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽが表示
<<１回目に保存する場合
[保存する場所] Data(D:) ドライブ → 「社会と情報」ﾌｫﾙﾀﾞ → 「1-#」
→ 授業の最初に作成したﾌｫﾙﾀﾞ「hp1#**shinyo-taro」 を選ぶ。
[ﾌｧｲﾙ名]が
=>
newpage1 となっている
1#**shinyo-taro
（全部 半角小文字）に変更し,[保存]ｸﾘｯｸ。
例 1 年 9 組 99 番 新陽太郎 なら
1999shinyo-taro
・「素材ファイルをコピーして保存」ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽ
→ 保存場所にファイルをコピーする チェック On 確認 → 保存
<<２回目以降に保存する場合
・<ファイル> → <上書き保存>
保存ﾌｧｲﾙが追加した場合
「素材ファイルをコピーして保存」
ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽが表示される → 保存
・上書き時に自動的にファイル名を変更する
チェックOn 確認
3/4
③区切り線挿入
・[素材]タブ → <画像> → <区切り線> 下の画像から選択 → <挿入>
・挿入した区切り線は配置したい位置までドラッグ。
以下素材を挿入した場合は同様に位置移動のためﾄﾞﾗｯｸﾞ。
④自己紹介をテキスト入力
・ナビメニュー → <文字の挿入> →
マウスで画面をﾄﾞﾗｯｸﾞし
テキストボックスが表示される。
・自己紹介文書を入力。（以下を参考に）
・文字の大きさや太さを設定 → ツールバーの文字列編集アイコンで変更
⑤画像/アニメーション挿入
・画像：素材ビュー [素材]タブ → <写真> → <花・植物 >～<動物> → <挿入>
サイズが大きい場合、画像を一度ｸﾘｯｸし，上下左右のポイントを引っ張りサイズを小さくする
・アニメーション：[素材]タブ → <アニメーション> → <イラスト> 下の図から選択 → <挿入>
・アニメーション：<区切り線> 下の図から選択 → <挿入>
4/4
・各内容の操作手順は中央モニター画面に表示しながら説明する。
・ページ編集ﾀﾌﾞとプレビューﾀﾌﾞを見比べながら作業を進める。
・作業の区切りを考えながら定期的に <ファイル> → <上書き保存> すること。
・「素材ファイルをコピーして保存」
ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽが表示される場合 → 保存
３．ブラウザで表示確認
・保存した ホームページﾌｧｲﾙ を，ﾀﾞﾌﾞﾙｸﾘｯｸする。
IE(ｲﾝﾀｰﾈｯﾄ・ｴｸｽﾌﾟﾛｰﾗ) が起動しホームページが表示されることを確認する。
[1] <ｽﾀｰﾄ> → <ｺﾝﾋﾟｭｰﾀ> → Data(D:) → 「情報A」ﾌｫﾙﾀﾞ
→ 「1-#」ﾌｫﾙﾀﾞ→「hp1#**shinyo-taro」ﾌｫﾙﾀﾞ
→ ﾎｰﾑﾍﾟｰｼﾞﾌｧｲﾙ 1999shinyo-taro をﾀﾞﾌﾞﾙｸﾘｯｸ
[2] IEが起動し，ホームページが表示されることを確認。
４．先生 PC にフォルダﾞコピー
<<ﾈｯﾄﾜｰｸで先生PCの「T提出」ﾌｫﾙﾀﾞへｺﾋﾟｰ＆貼り付け
[1] <ｽﾀｰﾄ> → <ｺﾝﾋﾟｭｰﾀ> → Data(D:) → 「社会と情報」→
「1-#」ﾌｫﾙﾀﾞ→「hp1#**shinyo-taro」ﾌｫﾙﾀﾞ を選択
フォルダ を右ｸﾘｯｸ <切り取り>
[2] 指示に従って提出。