< F2D837A815B B835789DB91E882542E6A746463>

Transcription

1 ホームページ作成 ( 題材 : 学校 ) ホームページ ビルダー 10 対応 作成例 フォルダ名 : school 1ページ目 ( index ) 2ページ目 ( 行事紹介 ) index.html [ 挿入 ]-[ ロゴ ] gyouji.html 3 ページ目 ( 写真集 ) [ 挿入 ]- [ 画像の効果 ]-[ アルバム ] [ 挿入 ]- [ 画像の効果 ]-[ サムネイル ] photo.html -1-

2 1ページ目 ( index のページ ) の作成 1 標準モードで新しいファイルを開きます 2 ページのタイトルを設定します 1[ 編集 ]-[ ページの属性 ] 2タイトルを入力して [ OK ] ボタンをクリック ここにページタイトルが表示されます 3 学校名のロゴを挿入します 1[ 挿入 ]-[ ロゴ ] 2 学校名を入力します -2-

3 3[ 背景の設定 ] ボタンをクリックします 4 適当な背景を選択して [ 完了 ] ボタンをクリックします 5 文字の大きさを調整します 6[ 完了 ] ボタンをクリックします 7 クリックして選択状態にします 8[ 中央揃え ] アイコンをクリックして, ロゴを中心にそろえます -3-

4 4 水平線を挿入します 1 挿入したい場所をクリック 2[ 挿入 ]-[ 水平線 ] 5 画像を挿入します 1[ 素材 ] タブを選択します 2 適当なフォルダを選択します 3 適当な画像を編集領域にドラッグ & ドロップします 4ハンドルをドラッグすると大きさを変えることができます -4-

5 5 画像の大きさを縮めた場合は必ず次の操作を行っておきます ( この操作をしないと, 見か けは小さな写真なのに, 重いデータを送信することになります ) 画像の上で右ボタンクリック [ 画像を編集 ]-[ 画像の編集 ] 6 表示サイズで保存 にチェックを入れて [OK] ボタンをクリック 7[ 中央揃え ] アイコンをクリックして, 画像を中央に揃えておきます 6 行事案内, 写真集 という文字を入力します [ Shift ] キー +[ Enter ] キーで改行 ( 改段落になります ) -5-

6 7 文字の大きさ 太さなどを調整します ( フォントの種類は変えない方がいいです ホームページを見る側のパソコン環境に依存するからです また, この場合だけですが, この文字に対してリンクの設定をするので, 文字色も変更しないでください ) 1 編集したい文字をドラッグして選択します 2[ 書式 ]-[ フォント ] 3 文字サイズ 文字飾り等指定して [ OK ] ボタンをクリックします 4[ 中央揃え ] アイコンをクリックして, 画像を中央に揃えておきます -6-

7 8 名前を付けて保存します 1[ ファイル ]-[ 名前を付けて保存 ] 2 保存したいドライブまたはフォルダを開きます 3[ 新規フォルダ作成 ] アイコンをクリック 4 school というフォルダ名を入力します ( 必ず半角英字で入力 ) 5[ Enter ] キーを押してフォルダ名を確定します 6[ 開く ] ボタンをクリックします -7-

8 7 index というファイル名を入力します ( 必ず半角英字で入力 ) 8[ 保存 ] ボタンをクリックします 9 内容を確認して [ 保存 ] ボタンをクリックします 9 背景画像を挿入します 1[ 素材 ] タブを選択します 2[ 壁紙用素材 ] を選択します 3 適当な壁紙を選んで編集領域へドラッグ & ドロップします -8-

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

10 2 ページ目 ( 行事案内のページ ) の作成 1 標準モードで新規ページを作成します [ ファイル ]-[ 標準モードで新規作成 ] 2 ページタイトルを設定します 1[ 編集 ]-[ ページの属性 ] 2 行事案内 と入力します 3[ OK ] ボタンをクリックします 3 編集領域に 行事案内 と入力し, 見出し2 に設定します 1 入力 2[ 属性 ] タブを選択します 3[ 見出し 2] を選択します -10-

11 4 文字を中央揃えにします [ 中央揃え ] アイコンをクリックします 5 リストマークを挿入します 1[ 素材 ] タブを選択します 2[ リストマーク ] を選択します 3 適当な画像を選んで編集領域へドラッグ & ドロップします 6 表を挿入します 1[ 表 ]-[ 表の挿入 ] 23 行 2 列に設定します 3 その他の設定を確認します 4[ OK ] ボタンをクリックします -11-

12 7 次の図のように文字を入力します 8 1 行だけ追加してみます [ 表 ]-[ 行の追加 ]-[ 下へ1 行追加 ] 9 2 行以上まとめて追加するには次のようにします 1[ 表 ]-[ 指定して追加 ] 2[ 行 ] ボタンをクリック 3どちらかを選択 4 行数を入力 5[ OK ] ボタンをクリック -12-

13 10 次の図のように文字を入力します 11 列を追加します 1 月 を入れたセルを選択 2[ 表 ]-[ 列の追加 ]-[ 右へ1 列追加 ] 12 画像を挿入します 1[ 素材 ] タブを選択 2[ イラスト ] を選択 3 適当なフォルダを選択 4 適当な画像を編集領域へドラッグ & ドロップ 13 画像の入った列を中央揃えにします 1 ドラッグして選択 2[ 中央揃え ] アイコンをクリック -13-

14 14 表を中央揃えにします 1 表の右側の編集領域をクリック ( こうすると, 表全体がピンク色の枠で囲まれ," 選択 " 状態になります 2[ 属性 ] タブを選択 3 位置揃え を[ 中央揃え ] にします 15 セルの結合をします 1 結合したいセル ( 一番上 ) を選択します 2[ 表 ]-[ セルを縦に結合 ]- [ 下のセルと結合 ] 3もう一度繰り返し,3 個のセルを結合します -14-

15 16 背景色の設定をします 1 編集領域の何もないところをクリックして選択します ( 表の横は ) 2[ 属性 ] タブを選択します 3[ 背景 ] を選択します 4[ その他 ] ボタンをクリックします 5 適当な色を選んで [ ンをクリックします OK ] ボタ 17 名前を付けて保存します 1[ ファイル ]-[ 名前を付けて保存 ] 2 school す フォルダを選択しま 3 gyouji す という名前をつけま 4[ 保存 ] ボタンをクリックします 5 保存ファイルの確認ダイアログが表示されたら,[ 保存 ] ボタンをクリックします -15-

16 3 ページ目 ( 写真集 ) の作成 1 標準モードで新規ページを作成します [ ファイル ]-[ 標準モードで新規作成 ] 2 ページタイトルを設定します 1[ 編集 ]-[ ページの属性 ] 2 写真集 と入力します 3[ OK] ボタンを クリックします 3 編集領域に 写真集 と入力し, 見出し2 に設定します 1 入力 2[ 属性 ] タブを選択します 3[ 見出し 2] を選択します -16-

17 4 文字を中央揃えにします [ 中央揃え ] アイコンをクリックします 5 リストマークを挿入します 1[ 素材 ] タブを選択します 2[ リストマーク ] を選択します 3 適当な画像を選んで編集領域へドラッグ & ドロップします 6 区切り線 ( 画像ファイル ) を挿入します 1[ 素材 ] タブを選択します 2[ 区切り線 ] を選択します 3 適当な画像を選んで編集領域へドラッグ & ドロップします 7 区切り線を中央揃えにします 1 画像ファイルをクリックして選択状態にします 2[ 中央揃え ] アイコンをクリック -17-

18 8 区切り線の下に 校庭の花 と入力し,[ 見出し 3] に設定し, 中央揃えにします 9 アルバム を挿入します 1 挿入したい場所をクリックします 2[ 挿入 ]-[ 画像の効果 ]-[ アルバム ] 3 サンプルの写真が入っているフォルダを選択します ( ホームページビルダーがインストールされているフォルダ )- Files - IBM Homepage Builder V10 - sample - image - photo - plants Program 4 適当な写真を 2 枚, クリックして選択します 5[ 次へ ] ボタンをクリックします -18-

19 6[ 写真を左に, 文を右に配置する ] を選択します 2[ 次へ ] ボタンをクリックします 8 アルバムの配置を確認 [ 中央揃え ] にします 9[ 完了 ] ボタンをクリックします 10 表に適当な説明文を入力します ダブルクリック 例 -19-

20 6 区切り線 ( 画像ファイル ) を挿入し, 中央揃えにします 1[ 素材 ] タブを選択します 2[ 区切線 ] を選択します 3 適当な画像を選んで編集領域へドラッグ & ドロップします 4[ 中央揃え ] アイコンをクリック 7 修学旅行写真集 というサブタイトルを入力して[ 見出し3] に設定し, 中央揃えにします 8 サムネイル を挿入します 1[ 挿入 ]-[ 画像の効果 ]-[ サムネイル ] -20-

21 2[ photo ] フォルダより, 適当な写真を5 枚選びますクリックして選択します 3[ 次へ ] ボタンをクリックします 4 サムネイルの大きさと配置, サムネイルの配置を設定します 5[ 次へ ] ボタンをクリックします 6[ 完了 ] ボタンをクリックします 9 [ プレビュー ] 画面で確認します クリック -21-

22 10 school フォルダに photo.html という名前で保存します 1[ ファイル ]-[ 名前を付けて保存 ] 2 photo と入力して[ 保存 ] ボタンをクリックします 3[ 保存 ] ボタンをクリックします リンクの設定 1 index.html ファイルを開きます 1[ ファイル ]-[ 開く ] [ school ] フォルダ-[ index.html ] 2 行事予定 をドラッグして選択状態にします -22-

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

24 5 photo.html を開き4と同様に, index.html へのリンクを設定し, 上書き保存します -24-