スライド 1

Transcription

1 ホームページ作成 ~ ホームページ ビルダーを使って ~

2 1. ホームページ ビルダーを開く 1デスクトップにあるホームページ ビルダーのアイコンをダブルクリックして起動する 1

3 メニューバー 2 かんたんナビバー 3 ツールバー 4 ナビメニュー 2

4 2 一度サイトを作成した後は サイトを開く リックすることによりサイトを開くことができます をク 3 学校ホームページを編集する際 各学校ですでにサイトを設定されている場合は サイトの新規作成 を行わずに 上記手順のみでサイトが開けます

5 3 メニューバー の 表示 ツールバー をクリックし プルダウンメニュー の 編集 書式 表 にチェックをつける ホームページビルダを初めて起動する際に ユーザごとに 1 度だけ必要な作業です 4

6 2. ホームページ内容の編集 (1) おおまかな流れ サイトの中から編集するページを開く 5 ページの内容を編集する 文字の挿入 修正 ロゴの挿入 修正 リンクの挿入 写真や画像の挿入 表の挿入

7 (2) サイトの中から編集するページを開く 閉じる 1 ビジュアルサイトビュー で編集したいページをダブルクリックして開きます 6

8 2 編集したいページが表示されます 7 編集したいページと違うページだった場合は このページを閉じる ( 画面右上 2 段目の をクリック ) 前頁の作業を繰り返す

9 (3) 編集で使用するタブ ページ編集 と プレビュー タブを使用する 8 ページ編集 : 編集作業を行う プレビュー : 実際の見え方を確認 HTML ソース ページ / ソース は使わなくてもよい ページ編集中に見えている内容と 実際が異なることがあるので 必ず プレビュー で確認しながら作業を行う

10 (4) 文字の挿入 1 aisatu.html に文字の挿入をします 9

11 2 写真下の位置でマウスをクリックし 田中やよい園長 と入力する 10

12 3 入力した文字列 ( 田中やよい園長 ) をマウスで選択した後 メニューバーの 書式 から フォント を選択する 完成図 11

13 12 4 フォント ダイアログボックスが開くので 色 サイズ 文字飾りを下記のとおり変更する

14 (5) ロゴの挿入 1 下記 の位置でマウスをクリックする 13

15 2 ナビメニュー から ロゴ( 飾り文字 ) 挿入 のアイコンをクリックし その後に出るウインドウから ロゴ ( 飾り文字 ) のアイコンをクリックする 14

16 15 3 ロゴの作成 ダイアログボックスが開くので 文字 に 園長あいさつ と入力し 002 のスタイルを選択後に 完了 をクリックする

17 (6) ロゴの編集 1 園長あいさつ の上にマウスを重ね 右クリックメニューを出して ロゴの編集 を選択する 16

18 2 ロゴの作成 ダイアログボックスが開くので 文字 の 園長あいさつ を 園長のあいさつ に変更し 001 のスタイルを選択後に 完了 をクリックする 17 3 上書き保存した後にページを閉じる

19 画像等の作成 編集を行うと 保存する際に下記のダイアログが表示されることがあります この場合は保存をクリックしてください 18

20 (7) リンクの挿入 リンク (LINK): あるページの画像や文字をマウスでクリックすると あらかじめ決められた他のページへジャンプするしくみ インターネットのホームページは すべてこのリンクというしくみを使ってページ間を行き来できるようになっています トップページからサブページへのリンクだけでなく その逆のリンクも設定できます 他の人のホームページへリンクすることもできます 19

21 20 1 ビジュアルサイトビュー で index.htm をダブルクリックします

22 2 アクセス にマウスを重ね 右クリックメニューを出して リンクの挿入 を選択する 21

23 22 3 属性 ダイアログボックスが表示されるので ファイルへ タグ内の 参照 をクリックする

24 23 4 開く ダイアログボックスが表示されるので HP 練習 フォルダ内にある map.html を選択して 開く をクリックする

25 5 属性 ダイアログボックスに戻るので ファイル名 に選択したファイルが表示されたのを確認する 6 フレームを設定している場合は ターゲット を変更し OK をクリックする 24 ターゲット の設定は ページに フレーム を使用している場合のみ必要です 研修ではフレームを設定し 右側のページを right という名称にしています

26 7 プレビュー 画面で アクセス をクリックして リンクが設定されていることを確認する 8 上書き保存した後にページを閉じる 25

27 (8) 画像の挿入 1 ビジュアルサイトビュー で album.html をダブルクリックする 26

28 27 2 下図の空白枠内をクリックする

29 3 ナビメニュー から 写真や画像の挿入 リックし その後に出るウインドウから デジカメ写真 をクリックする をク 28

30 29 4 写真の挿入ウィザード ダイアログボックスが開くので ファイルから をクリックする

31 30 5 開く ダイアログボックスが開くので HP 練習 フォルダ内の dog.jpg を選択して 開く をクリックする

32 31 6 写真の挿入ウィザード ダイアログボックスに戻るので プレビュー で写真を確認した後に 次へ をクリックする

33 32 7 写真の挿入ウィザード ( 画像の大きさ調整 ) ダイアログボックスが開くので サイズの指定 から 小 を選択し 次へ をクリックする

34 33 8 写真の挿入ウィザード ( 画像の補正 ) ダイアログボックスが開くので 次へ をクリックする

35 34 9 写真の挿入ウィザード ( 画像の特殊効果選択 ) ダイアログボックスが開くので 完了 をクリックする

36 10 画像が挿入される 上書き保存した後にページを閉じる

37 (9) 画像の編集 画像ファイル容量の縮小 ホームページで使用する画像は 見る人の負担を軽減するために ファイル容量が極力小さい画像を用いることが望ましい 画像の大きさを変える際に マウスのドラッグで画像を小さくしただけではファイル容量は変わらない 小さくする 36

38 37 1 ビジュアルサイトビュー で pic_test1.html をダブルクリックする

39 38 2 画像をマウスでクリックし 画像の周りに サイズ変更ハンドル が出た状態にする

40 39 3 サイズ変更ハンドル をドラッグして写真のサイズを小さくする

41 4 写真の上で右クリックして 右クリックメニュー を出す 5 画像を編集 画像の調整 画像を表示サイズで保存 の順に選択する 40

42 41 6 メニューバー の ファイル から 上書き保存 を選択する

43 7 素材ファイルをコピーして保存 ダイアログボックスが開くので 保存 をクリックする 42 この作業により 写真のサイズおよび容量を小さくすることができます

44 (10) 画像の編集 画像の切り抜き 1 写真の上で右クリックして 右クリックメニュー を出す 2 画像を編集 画像の編集 の順に選択する 43

45 44 3 画像の編集 ダイアログボックスが出るので 切り抜き をクリックする

46 45 4 画像に 切り抜き枠 が表示されるので マウスでドラッグして枠を変更する

47 5 切り抜き をクリックし 切り抜かれた画像を確認後 OK をクリックする 46 6 上書き保存した後にページを閉じる

48 (11) 画像の編集 モザイク処理 デジカメ写真を用いる場合の注意点 : 個人情報保護の観点から 顔や氏名が特定できる写真を用いる場合は注意することが必要 顔が区別できる写真を用いる場合は 本人および保護者の同意をとりましょう ( 同意書を作成するほうが望ましい ) 個人名を特定できるような写真は極力避けましょう ( 名札 作品についている名前に注意 ) 47

49 48 1 ビジュアルサイトビュー で pic_test2.html をダブルクリックする

50 2 写真の上で右クリックして 右クリックメニュー を出す 3 画像を編集 画像の編集 の順に選択する 49

51 50 4 画像の編集 ダイアログボックスが出るので 詳細設定 をクリックする

52 5 画像の画質 のスライダーを 低品質 側へスライドさせていく 6 変更した画質内容を確認後 OK をクリックする 7 上書き保存した後にページを閉じる 51

53 (12) 新規ページの作成 1 メニューバー の ファイル から 標準モードで新規作成 を選択する 完成図 52

54 (13) 壁紙の設定 1 ナビメニュー の 壁紙の挿入 を選択する をクリックし 53

55 54 2 素材集から開く ダイアログボックスが開くので w9b.gif を選択し 開く をクリックする

56 (14) 表の挿入 1 ナビメニュー の 表の挿入 をクリックする 55

57 56 2 表の挿入 ダイアログボックスが開くので 行数 が 4 列数 が 2 となっていることを確認した後に OK をクリックする

58 57 3 表の左横の空白をクリックして表全体を選択する

59 4 をクリックして表を中央に移動する 58

60 5 のをクリックして表の一番上にカーソ ルを移動し 改行により表の上にスペースを作る 59

61 6 左上のセルを選択後 表をマウスドラッグにより広げる 60

62 61 7 同様に右上のセルを選択後 表をマウスドラッグにより広げる

63 62 8 表の左横の空白部をクリックして表全体を選択後 下のサイズ変更ハンドルをドラッグして表を広げる

64 9 下図に示す文字を入力する gyouji.html と名付けて保存する 63

65 参考 表の挿入時の注意点 作成した表に後から写真を挿入した場合 編集画面では整って見えるのにプレビュー画面で確認すると 文字の改行位置がおかしくなってしまうことがあります ( 編集画面 ) ( プレビュー画面 ) 改行位置がおかしい 64

66 これは写真の幅が セルの幅の設定数値より大きい場合に発生する現象です セルを選択し 属性 ダイアログボックス開き セルの幅を写真の幅以上に設定すると解消されます 1 問題が発生しているセルの写真の上で 右クリックメニュー を出し 属性の変更 を選択する 65

67 66 2 属性 ダイアログボックスが開くので 画像 タブの中の サイズ の幅を確認した後に キャンセル をクリックする

68 67 3 問題が発生しているセルの文字部分の上で 右クリックメニュー を出し 属性の変更 を選択する

69 68 4 属性 ダイアログボックスの セル タブ内にあるセルの幅を先ほど確認した 画像 の幅に変更する

70 69

71 参考 表の使い方 ( 応用 ) 枠表示を非表示にした 表 を用いるとレイアウトを整えるのに便利です 属性 ダイアログボックスの 枠表示 のチェックをはずすと表が非表示となる 70

72 < 編集ページ > 枠表示を非表示で作成 < プレビュー > 71

73 (15) ボタンの挿入 1 下記 の位置でマウスをクリックする 完成図 72

74 73 2 ナビメニュー の ロゴ( 飾り文字 ) の挿入 をクリックしを選択する

75 74 3 ボタンの作成 ダイアログボックスが開くので 文字 に TOP と入力し 03a のボタンを選択した後に 完了 をクリックする

76 75 4 ボタンを選択後にをクリックして 中央に移動する

77 練習問題 スライド番号 23~25 スライド番号 29~35 ターゲット設定なし 1 ロゴ を使ってを追加する 2 ボタンに index_right.html へのリンクを設定する 3 index.htm を開きボタンに gyouji.html へのリンクを設定する 1 スライド番号 29~35 ターゲット right

78 新規ページを保存する際の注意点 : ファイル名およびフォルダ名 は必ず半角英数字としてください ( スペース ( 空白 ) /, ; : *? < > も用いないでください ) ホームページのデータフォルダの中にさらに分割したフォルダ ( データ種類ごとやページごとに分割するなど ) を作成しておくと あとで修正したりする際に見つけやすくなります 77