スライド 1

(1)

ホームページ作成

(2)

１．ホームページ・ビルダーを開く

_{①デスクトップにあるホームページ・ビルダーの}

(3)

2

１２３４ ①メニューバー ②かんたんナビバー ③ツールバー ④ナビメニュー

(4)

②一度サイトを作成した後は《サイトを開く》をクリックすることによりサイトを開くことができます。

(5)

4

_{③《メニューバー》の《表示》}_{→《ツールバー》をクリックし}

《プルダウンメニュー》の《編集》《書式》《表》にチェックをつける。

(6)

（１）おおまかな流れ

サイトの中から編集するページを開くページの内容を編集する・文字の挿入、修正・ロゴの挿入、修正・リンクの挿入・写真や画像の挿入・表の挿入

２．「ホームページ内容の編集」

(7)

6

（２）サイトの中から編集するページを開く・閉じる

①《ビジュアルサイトビュー》で編集したいページをダブルクリックして開きます。

(8)

(9)

8 「ページ編集」：編集作業を行う「プレビュー」：実際の見え方を確認 ※「HTMLソース」「ページ/ソース」は使わなくてもよい ※ページ編集中に見えている内容と、実際が異なることがあるので、必ず「プレビュー」で確認しながら作業を行う。

（３）編集で使用するタブ

《ページ編集》と《プレビュー》タブを使用する。

(10)

（４）文字の挿入

(11)

10

②写真下の位置でマウスをクリックし「田中やよい園長」と入力する。

(12)

③入力した文字列（田中やよい園長）をマウスで選択した後、メニューバーの《書式》から《フォント》を選択する。

(13)

12

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

(14)

（５）ロゴの挿入

(15)

14

②《ナビメニュー》から《ロゴ（飾り文字）挿入》の

アイコンをクリックし、その後に出るウインドウから《ロゴ（飾り文字）》のアイコンをクリックする。

(16)

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

(17)

16

（６）ロゴの編集

①「園長あいさつ」の上にマウスを重ね、右クリックメニューを出して《ロゴの編集》を選択する。

(18)

②《ロゴの作成》ダイアログボックスが開くので、《文字》の「園長あいさつ」を「園長のあいさつ」に変更し、

(19)

18

画像等の作成、編集を行うと、保存する際に下記の

ダイアログが表示されることがあります。

(20)

（７）リンクの挿入

リンク（LINK）：

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

(21)

20

①《ビジュアルサイトビュー》で「index.htm」をダブルクリックします。

(22)

②「アクセス」にマウスを重ね、右クリックメニューを出して《リンクの挿入》を選択する。

(23)

22

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

(24)

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

(25)

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

(26)

⑦《プレビュー》画面で、「アクセス」をクリックして、リンクが設定されていることを確認する。

(27)

26

（８）画像の挿入

①《ビジュアルサイトビュー》で「album.html」をダブルクリックする。

(28)

(29)

28

③《ナビメニュー》から《写真や画像の挿入》をクリックし、その後に出るウインドウから

(30)

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

(31)

30

⑤《開く》ダイアログボックスが開くので、「HP練習」フォルダ内の「dog.jpg」を選択して《開く》をクリックする。

(32)

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

(33)

32

⑦《写真の挿入ウィザード（画像の大きさ調整）》ダイアログボックスが開くので、《サイズの指定》から《小》を選択し、《次へ》をクリックする。

(34)

⑧《写真の挿入ウィザード（画像の補正）》ダイアログボックスが開くので、《次へ》をクリックする。

(35)

34

⑨《写真の挿入ウィザード（画像の特殊効果選択）》ダイアログボックスが開くので、《完了》をクリックする。

(36)

(37)

36

（９）画像の編集〈画像ファイル容量の縮小〉

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

(38)

①《ビジュアルサイトビュー》で「pic_test1.html」をダブルクリックする。

(39)

38

②画像をマウスでクリックし、画像の周りに《サイズ変更ハンドル》が出た状態にする。

(40)

③《サイズ変更ハンドル》をドラッグして写真のサイズを小さくする。

(41)

40

④写真の上で右クリックして《右クリックメニュー》を出す。 ⑤《画像を編集》《画像の調整》《画像を表示サイズで保

(42)

⑥《メニューバー》の《ファイル》から《上書き保存》を選択する。

(43)

42

⑦《素材ファイルをコピーして保存》ダイアログボックスが開くので《保存》をクリックする。

この作業により、写真のサイズおよび容量を小さくすることができます。

(44)

（１０）画像の編集〈画像の切り抜き〉

①写真の上で右クリックして《右クリックメニュー》を出す。 ②《画像を編集》《画像の編集》の順に選択する。

(45)

44

③《画像の編集》ダイアログボックスが出るので《切り抜き》をクリックする。

(46)

④画像に《切り抜き枠》が表示されるので、マウスでドラッグして枠を変更する。

(47)

46

⑤《切り抜き》をクリックし、切り抜かれた画像を確認後《ＯＫ》をクリックする。

(48)

（１１）画像の編集〈モザイク処理〉

・個人情報保護の観点から、顔や氏名が特定できる写真を用いる場合は注意することが必要。・顔が区別できる写真を用いる場合は、本人および保護者の同意をとりましょう。（同意書を作成するほうが望ましい）・個人名を特定できるような写真は極力避けましょう。（名札、作品についている名前に注意）デジカメ写真を用いる場合の注意点：

(49)

48

①《ビジュアルサイトビュー》で「pic_test2.html」をダブルクリックする。

(50)

②写真の上で右クリックして《右クリックメニュー》を出す。 ③《画像を編集》《画像の編集》の順に選択する。

(51)

50

④《画像の編集》ダイアログボックスが出るので《詳細設定》をクリックする。

(52)

⑤《画像の画質》のスライダーを《低品質》側へスライドさせていく。

(53)

52

（１２）新規ページの作成

① 《メニューバー》の《ファイル》から《標準モードで新規作成》を選択する。

(54)

（１３）壁紙の設定

① 《ナビメニュー》の《壁紙の挿入》をクリックしを選択する。

(55)

54

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

(56)

（１４）表の挿入

(57)

56

②《表の挿入》ダイアログボックスが開くので、《行数》が４、《列数》が２となっていることを確認した後に《OK》をクリックする。

(58)

(59)

58

(60)

→ → → → ⑤ のをクリックして表の一番上にカーソルを移動し、改行により表の上にスペースを作る。 →

(61)

60

(62)

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

(63)

62

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

(64)

⑨下図に示す文字を入力する。

gyouji.htmlと名付けて保存する。

(65)

64

【参考】表の挿入時の注意点

作成した表に後から写真を挿入した場合、編集画面では整って見えるのにプレビュー画面で確認すると、文字の改行位置がおかしくなってしまうことがあります。（編集画面）（プレビュー画面）改行位置がおかしい

(66)

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

(67)

66

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

(68)

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

(69)

68

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

(70)

(71)

70

【参考】表の使い方（応用）

枠表示を非表示にした「表」を用いるとレイアウトを整えるのに便利です。《属性》ダイアログボックスの《枠表示》のチェックをはずすと表が非表示となる。

(72)

<編集ページ>

(73)

72

①下記の位置でマウスをクリックする。

（１５）ボタンの挿入

(74)

② 《ナビメニュー》の《ロゴ（飾り文字）の挿入》をクリックしを選択する。

(75)

74

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

(76)

④ ボタンを選択後にをクリックして、中央に移動する。

(77)

76 【練習問題】 ①《ロゴ》を使ってを追加する。 ② ボタンに「index_right.html」へのリンクを設定する。 ③「index.htm」を開きボタンに「gyouji.html」へのリンクを設定する。１２３スライド番号 23～25 スライド番号 29～35 ターゲット設定なしスライド番号 29～35 ターゲットright

(78)

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