Ⅰ Web ページ作成の準備 Ⅱ ホームページ・ビルダー8について Ⅲ Web

§５
Ⅰ
HTML の基礎
Web ページ作成の準備
１
HTML とは
２
Web ページの構成
３
Windows の設定変更
４
サンプルページの確認
Ⅱ
1
················································
1
··············································
2
············································
4
ホームページ・ビルダー８について
１
画面構成
２
編集モード
Ⅲ
·······················································
························································
5
······················································
8
Web ページの作成
１
Web ページの新規作成
············································
9
２
ページタイトルの設定
···········································
10
３
文字の挿入
·····················································
11
４
文字の編集
·····················································
14
５
Web ページの保存（名前を付けて保存）
６
Web ページを開く
７
水平線の挿入
８
画像の挿入
９
ボタンの挿入
１０
Ⅳ
···························
19
···············································
22
···················································
23
·····················································
24
···················································
28
Web ページの保存（上書き保存）
··································· 31
リンクの設定
１
リンクの設定（ページや URL へのリンクの設定）
２
リンクの設定（ラベルへのリンクの設定）
３
ブラウザで確認
Ⅴ
··················
36
·························
45
·················································
52
ページの編集
１
壁紙の挿入
·····················································
54
２
ロゴの作成
·····················································
56
３
動画ファイルの挿入
４
表の挿入
·············································
59
·······················································
62
Ⅰ
Web ペ ー ジ 作 成 の 準 備
１
HTML と は
HTML（ Hyper Text Markup Language） は Web ペ ー ジ の 構 造 や 体 裁 を 定 義 す
る 言 語 で す 。HTML を 使 っ て 記 述 さ れ た フ ァ イ ル を「 HTML フ ァ イ ル 」と い い ま
す。
HTML は「 タ グ 」と 呼 ば れ る 命 令 で 記 述 さ れ て い ま す 。こ の タ グ は 、文 字 や
画 像 な ど の 情 報 を 、ど の よ う に ブ ラ ウ ザ 上 で 表 示 す る か を 記 述 し た も の で す 。
現 在 表 示 さ れ て い る Web ペ ー ジ を HTML 形 式 で 表 示 す る に は 、ブ ラ ウ ザ の［ 表
示 ］メ ニ ュ ー を 選 択 し 、［ ソ ー ス ］を ク リ ッ ク し ま す 。HTML を 知 ら な く て も 、
ホ ー ム ペ ー ジ ・ ビ ル ダ ー な ど の Web ペ ー ジ 作 成 ソ フ ト を 使 用 す る と 、 ワ ー プ
ロ 感 覚 で Web ペ ー ジ を 作 成 し て い く こ と が で き ま す 。
２
Web ペ ー ジ の 構 成
Web ペ ー ジ は 基 本 と な る HTML フ ァ イ ル の 他 に 、画 像 フ ァ イ ル 、音 声 フ ァ イ
ルなど複数のファイルから構成されています。
Web ペ ー ジ 内 に 画 像 が あ る 場 合 、 「 ど の フ ォ ル ダ の 何 と い う 画 像 フ ァ イ ル
を表示する」というタグが記述されているために、画像ファイルが他のフォ
ル ダ へ 移 動 し た り 、 そ の フ ォ ル ダ か ら 削 除 さ れ る と Web ペ ー ジ 上 で は 画 像 が
表示されなくなりますので注意しましょう。
下 図 は 、 基 本 と な る HTML フ ァ イ ル 「 index.htm 」 に 、 画 像 フ ァ イ ル
「 h-dav3.jpg」 が 組 み 合 わ さ れ て 表 示 さ れ て い る Web ペ ー ジ で す 。
index.htm
h-dav3.jpg
§5-1
３
(1)
Windows の 設 定 変 更
拡張子を表示する
Web ペ ー ジ の 作 成 で は 、様 々 な フ ァ イ ル の 種 類 を 使 用 し ま す 。あ ら か じ
め フ ァ イ ル の 拡 張 子 が 表 示 さ れ る よ う に Windows の 設 定 を 変 更 し て お き
ま し ょ う 。拡 張 子 は フ ァ イ ル 名 の 後 ろ に 付 い て い る「 ．」（ ピ リ オ ド ）と
それに続く英数字のことで、ファイルの種類を表しています。
①
デスクトップにある［マ
イコンピュータ］をダブル
クリックします。
② ［ ツ ー ル ］メ ニ ュ ー を 選 択
し 、［ フ ォ ル ダ オ プ シ ョ ン ］
をクリックします。
③ ［ 表 示 ］タ ブ を ク リ ッ ク し
ます。
④ ［ 詳 細 設 定 ］の 中 の［ 登 録
されている拡張子は表示し
ない］のチェックを外しま
す。
(2)
ディスプレイの解像度
Web ペ ー ジ の 表 示 は 、デ ィ ス プ レ イ の サ イ ズ や 解 像 度 に よ っ て 異 な り ま
す 。 最 も 普 及 し て い る 「 800×600」 ピ ク セ ル ま た は 「 1024×768」 ピ ク セ
ル に 設 定 し て Web ペ ー ジ を 作 成 し ま し ょ う 。
①
デスクトップの何も表示されていない部分で右クリックします。
②
表 示 さ れ る シ ョ ー ト カ ッ ト メ ニ ュ ー の 中 か ら［ プ ロ パ テ ィ ］を ク リ ッ
クします。
③ ［設定］タブをクリックします。
§5-2
④ ［ 画 面 の 解 像 度 ］の つ ま み
をドラッグして設定します。
※ 県 立 教 育 セ ン タ ー の 研 修 環 境 で は 、 Windows の 設 定 変 更 は で き ま せ ん 。
（設定済みです。）
§5-3
４
サンプルページの確認
リンクの状態を調べ、図に矢印を書き入れましょう。
フ ァ イ ル 名 「 p1.htm」
ページタイトル名「学習の流れ－導入－」
フ ァ イ ル 名 「 index.htm」
ページタイトル名「世界の名画に親しむ」
参考
ページタイトルについて
Web ペ ー ジ を Internet Explorer な ど の ブ ラ ウ ザ で 表 示 す る と 、 タ イ ト ル バ ー に
ペ ー ジ タ イ ト ル が 表 示 さ れ ま す 。ま た 、ブ ラ ウ ザ で「 お 気 に 入 り 」や「 ブ ッ ク マ ー
ク」にページを登録すると、ページタイトルが登録されます。
§5-4
Ⅱ
ホームページ・ビルダー８について
１
画面構成
か ら ホ ー ム ペ ー ジ・ビ ル ダ ー を 選 択 し て 起 動 す る と 、下 図 の 画
面が起動します。
①
①
編集スタイル
ホームページ・ビルダー８では、３つの編集スタイルを選択できます。
編集スタイルを選択するまでは、他の機能は使用できません。
ア
「かんたん」編集スタイル
初 心 者 向 け の 編 集 ス タ イ ル で す 。わ か り や す い メ ニ ュ ー と 、大 き め の
ツ ー ル ボ タ ン で 簡 単 に Web ペ ー ジ を 作 成 で き ま す 。た だ し 、使 用 で き る
機能が限定されています。
イ
「スタンダード」編集スタイル
初 級 者 か ら 上 級 者 ま で 使 用 す る 標 準 の 編 集 ス タ イ ル で す 。ナ ビ メ ニ ュ
ー や メ ニ ュ ー バ ー を 使 用 し て Web ペ ー ジ を 作 成 で き ま す 。
ウ
「エディターズ」編集スタイル
上級者向けのスタイルです。初心者用のメニューを表示しないため、
画 面 領 域 を 広 く 使 っ て 作 業 で き ま す 。HTML を 直 接 記 述 し て Web ペ ー ジ を
作成します。
研修では「スタンダード」編集スタイルを使用します。
§5-5
①
②
③
④
⑤
⑥
⑦
⑧
⑨
①
タイトルバー
起 動 中 の ア プ リ ケ ー シ ョ ン ソ フ ト 名 、現 在 開 い て い る ペ ー ジ の フ ァ イ ル
名、ページタイトルが表示されます。
②
メニューバー
コ マ ン ド を 実 行 す る と き に 使 用 し ま す 。作 業 状 況 に よ り 表 示 さ れ る メ ニ
ューが異なります。
③
かんたんナビバー
よ く 使 う 機 能 が ペ ー ジ 作 成 の 流 れ に そ っ て 、順 に 表 示 さ れ て い ま す 。各
ボタンをクリックするとダイアログボックスが表示されます。
④
ツールバー
コ マ ン ド を 実 行 す る と き に 使 用 し ま す 。よ く 使 う コ マ ン ド が ボ タ ン と し
て登録されています。
⑤
ナビメニュー
ペ ー ジ 作 成 の 際 に よ く 使 う 機 能 を 登 録 し た も の で 、リ ン ク や 画 像 な ど を
挿入するときに使用します。
§5-6
⑥
素材集
ページに素材を挿入する時などに使用します。
⑦
ページ編集領域
ページを編集するときに使用します。ページ編集領域にはタブがあり、
ページの作成方法や行いたい作業に合わせてタブを切り替えて作業しま
す。編集スタイルが「スタンダード」の時に表示されるタブは４つです。
・ページ編集タブ
ワープロソフト感覚でページを作成できます。
・ HTML ソ ー ス タ ブ
ページ編集タブでページを作成すると自動的
に HTML ソ ー ス が 生 成 さ れ ま す 。こ の HTML を 直
接編集してページを作成することもできます。
・ ペ ー ジ /ソ ー ス タ ブ
画 面 が 上 下 に 分 か れ 、上 側 に「 ペ ー ジ 編 集 」タ
ブ 下 側 に 「 HTML ソ ー ス 」 タ ブ と 同 じ 内 容 が 表
示されます。
・プレビュータブ
編 集 中 の ペ ー ジ が 、ブ ラ ウ ザ で は ど の よ う に 表
示されるかを確認できます。
⑧
属性／ドキュメントアウトライナ／ページ一覧
「 属 性 」タ ブ と「 ド キ ュ メ ン ト ア ウ ト ラ イ ナ 」タ ブ で は 、選 択 中 の 文 字 、
表 、画 像 な ど の 設 定 を 変 更 で き ま す 。「 ペ ー ジ 一 覧 」タ ブ で は 、編 集 中 の
Web ペ ー ジ が 一 覧 表 示 さ れ ま す 。
「属性／ドキュメントアウトライナ／ページ一覧」が表示されていたら
閉じましょう
⑨
ステータスバー
現在の作業状況や処理手順が表示されます。
§5-7
２
編集モード
ホームページ・ビルダーには、「どこでも配置モード」と「標準モード」
の２つの編集モードがあります。
「標準モード」
操 作 方 法 が Microsoft Word な ど の ワ ー プ ロ ソ フ ト に 似 て い ま す 。 文 字
や 画 像 を 挿 入 す る と 左 端 に 配 置 さ れ る の で 、そ の 後 表 示 位 置 を 変 更 し ま す 。
文 字 や 画 像 な ど の レ イ ア ウ ト を 整 え た い と き は「 表 」を 使 っ て 配 置 し ま す 。
ブ ラ ウ ザ の ウ ィ ン ド ウ 幅 を 変 更 す る と 、文 字 や 画 像 の 配 置 は 自 動 的 に 調
整されます。
「どこでも配置モード」
操 作 方 法 が Microsoft PowerPoint な ど の 作 図 ソ フ ト に 似 て い ま す 。 文
字 や 図 形 な ど を マ ウ ス 操 作 で 自 由 に 配 置 で き ま す が 、ブ ラ ウ ザ の ウ ィ ン ド
ウ幅を変えても、文字や画像の位置は固定されたままです。
研修では、「標準モード」を使用します。
§5-8
Ⅲ
Web ペ ー ジ の 作 成
１
Web ペ ー ジ の 新 規 作 成
(1)
ツ ー ル バ ー の ［ HTML の 新 規 作 成 ］ を ク リ ッ ク し ま す 。
(2)
［標準モード］を選択して
新 し い Web ペ ー ジ が 表 示 さ れ ま す 。
§5-9
をクリックします。
２
ページタイトルの設定
(1)
メ ニ ュ ー バ ー の［ 編 集 ］を
クリックし、
［ページの属性］
をクリックします。
［属性］ダイアログボックスが表示されます。
(2)
［ページ情報］タブの［ペ
ー ジ タ イ ト ル ］に「 世 界 の 名
画に親しむ」と入力し、
をクリックしま
す。
世界の名画に親しむ
入力したページタイトルがタイトルバーに表示されます。
世界の名画に親しむ
§5-10
３
文字の挿入
文 字 は「 フ ォ ー カ ス 枠 」で 囲 ま れ る「 段 落 」に 入 力 し ま す 。文 字 を 入 力 し 、
確定するとフォーカス枠が自動的に表示されます。
参考
段落について
文 字 の 配 置 は 段 落 単 位 で 設 定 し ま す 。ま た 段 落 を 削 除 す る に は フ ォ ー カ ス
枠内の文字をすべて削除します。
参考
編集中の改行・改段について
同 じ 段 落 内 で の 改 行 は［ Enter］キ ー を 押 し 、段 落 を 改 め る と き は［ Shift］
キ ー ＋［ Enter］キ ー を 押 し ま す 。改 段 す る と 段 落 と 段 落 の 間 に は １ 行 分 の 間
隔が空きます。
操
改行
作
画面上の表示など
［ Enter］ キ ー の み を 押 す 。
段落の中での行改めで、次の行
との間に空白行はできません。
改段
［ Shift］キ ー ＋［ Enter］キ ー を 押 す 。
段落と段落の間には１行分の空
白行ができます。
(1)
カーソルが先頭にあるこ
と を 確 認 し ま す 。「 世 界 の 名
画に親しむ」と入力します。
(2)
［ Shift］ キ ー ＋ ［ Enter］
キーを押し、改段します。
§5-11
以 降 の 文 章 は 一 太 郎 フ ァ イ ル で 用 意 し て あ り ま す の で［ コ ピ ー ］&［ 貼
り付け］で本文を作成していきます。
(3)
ホームページビルダーを
最小化します。
(4)
「 マ イ ド キ ュ メ ン ト 」 の 中 の 「 HTMLsample」 フ ォ ル ダ に あ る 「 HTML 本
文 .jtd」 を 開 き ま す 。
(5)
「－デジタルコンテンツを利
用 し て － 」か ら １ ペ ー ジ の 終 わ
り「☆
絵 画 を ･･･発 表 し 合
う 。」 ま で を 範 囲 選 択 し 、 ツ ー
ルバーの
［ コ ピ ー ］を ク リ
ックします。
(6)
タスクバーの「ホームペー
ジ ･ビ ル ダ ー 」 ボ タ ン を ク リ ッ
クし、画面を切り替えます。
§5-12
(7)
２段落目の先頭にカーソルがあるのを確認し、ツールバーの
［貼り付け］をクリックします。
(8)
次 の よ う に ［ Shift］ キ ー ＋ ［ Enter］ キ ー を 押 し 、 改 段 し ま す 。
※枠は段落を表しています。
※各段落の先頭にある
[段 落 記 号 ]は 、[Delete]キ ー で 削 除 し ま す 。
§5-13
参考
操作の取り消しとやり直しについて
文 字 の 入 力 や 画 像 の 挿 入 な ど の 編 集 操 作 を 間 違 え た と き は 、Word な ど と 同
様に直前の操作を取り消してひとつ前の状態に戻すことができます。また、
取り消した操作を再び行うこともできます。
●
直前の操作を取り消すとき
は 、ツ ー ル バ ー の
［元
に戻す］をクリックします。
●
取り消した操作を再び実行
するときは、ツールバーの
［ や り 直 し ］を ク リ ッ ク
します。
４
文字の編集
(1)
文字サイズの変更
文字サイズを変更するにはブラウザで設定されている標準の文字サイ
ズ に 対 し て 大 き く す る か 、小 さ く す る か を 指 定 し ま す 。通 常 の 文 字 サ イ ズ
を「３」として、「１」から「７」の７段階からサイズを指定します。
「 世 界 の 名 画 に 親 し む 」を 通 常 の 文 字 サ イ ズ よ り ４ 段 階 大 き く し 、「 ７ 」
にします。
①
「 世 界 の 名 画 に 親 し む 」を 範
囲選択します。
§5-14
②
［ ツ ー ル バ ー ］の
［文字
サ イ ズ 拡 大 ］を ４ 回 ク リ ッ ク
します。
※文字に書式を設定すると、
段落のフォーカス枠とは
別 に 、書 式 の フ ォ ー カ ス 枠
が表示されます。
参考
［ HTML ソ ー ス ］ タ ブ
編 集 中 に 、 [HTML ソ ー ス ]タ ブ で 、 タ グ の 確 認 を す る こ と が で き ま す 。
文 字 サ イ ズ を ４ 段 階 拡 大 す る こ と で 「 FONT size="+4"」 と 表 示 さ れ て い
ます。
③
同様に各項目名を３
段階、説明文を２段
階大きくします。
「＋３」
「＋２」
§5-15
(2)
①
太字の設定
「 世 界 の 名 画 に 親 し む 」を 範
囲選択し、ツールバーの
［太字］をクリックします。
太字を解除するには再度
ボタンをクリックします。
ボ タ ン で 設 定 の ON/OFF を 切 り 替 え る こ と が で き ま す 。
(3)
①
文字色の設定
「 学 習 の ね ら い 」を 範 囲 選 択
し、ツールバーの
［フォ
ン ト の 変 更 ］を ク リ ッ ク し ま
す。
［フォント］ダイアログボ
ックスが表示されます。
②
を ク リ ッ ク し 、パ レ ッ ト
を 表 示 さ せ 、任 意 の 色 を 選 択
します。
§5-16
なども同じ
色指定の枠に選択した色
のカラーコードが表示され
ます。
③
をクリックしま
す。
※範囲選択を解除して色を確認しましょう。
参考
カラーコードについて
HTML で は 色 を コ ー ド で 表 し ま す 。＃ の あ と に ０ ～ ９ 、ａ ～ ｆ の 中 か ら
６ 文 字 を 組 み 合 わ せ て 使 用 し ま す 。例 え ば「 #ffffff」は「 白 色 」に な り
ま す 。 お よ そ 1677 万 色 を カ ラ ー コ ー ド で 表 現 す る こ と が で き ま す 。
参考
色の設定について
文字の色は変更できますが、あまり多くの色を使いすぎると読みづら
くなるので、全体の配色を考えて適度な色にしましょう。
④
同様にその他の「学習の～」に同じ色を設定します。
§5-17
(4)
配置の変更
ペ ー ジ 内 に 入 力 し た 文 字 や 画 像 な ど は 、初 期 の 設 定 で は 左 端 に 配 置 さ れ
るので、後から中央や右端に配置します。
「世界の名画に親しむ」の段落を中央に配置します。
①
「 世 界 の 名 画 に 親 し む 」の 段
落にカーソルを表示させま
す。
②
ツールバーの
［中央揃
え］をクリックします。
「―デジタルコンテンツを
利 用 し て ― 」の 段 落 も 中 央 に
配置しましょう。
§5-18
５
(1)
Web ペ ー ジ の 保 存 （ 名 前 を 付 け て 保 存 ）
［ファイル］メニューを選
択 し 、［ 名 前 を 付 け て 保 存 ］
をクリックします。
［名前を付けて保存］ダイアログボックスが表示されます。
(2) ［ 保 存 す る 場 所 ］に「 マ イ ド
キ ュ メ ン ト 」 の 中 の 「 HTML
practice」 を 指 定 し 、［ フ ァ
イ ル 名 ］の 欄 に「 index.htm」
と入力し、
をクリッ
クします。
タイトルバーにファイル名が表示されます。
index.htm
※ [名 前 を 付 け て 保 存 ]が 終 了 し た ら ペ ー ジ を 閉 じ ま し ょ う 。
参考
ファイル名について
ファイル名は記号や機種依存文字（①②…など）を除いた半角の英数
字で指定します。（ＷＷＷサーバーによっては日本語のファイル名を正
しく認識できなかったり、記号に特別な意味が設定されていたりする場
合があります。）
ま た 、ト ッ プ ペ ー ジ の フ ァ イ ル 名 は「 index.htm」か「 index.html」が
一般的です。契約しているプロバイダによってはトップページのファイ
ル名が決められている場合があるので確認が必要です。
§5-19
練習
①
２ページ目を作成しましょう
新規作成
白紙ページを表示します。
［ HTML の 新 規 作 成 ］ を
クリックします。
［標準モード］を選択し、
をクリックします。
②
ページタイトルの設定
［ 編 集 ］メ ニ ュ ー を ク リ ッ ク
し 、［ ペ ー ジ の 属 性 ］ を ク リ ッ
クします。
［ページタイトル］に「学
習 の 流 れ -導 入 -」 と 入 力 し
をクリックします。
学 習 の 流 れ -導 入 -
§5-20
③
文字の入力
「 HTML 本 文 .jtd」か
ら 本 文 を［ コ ピ ー ］&
［貼り付け］します。
上 図 の よ う に ［ Shift］ キ ー ＋ ［ Enter］ キ ー を 押 し 、 改 段 し ま す 。
※枠は段落を表しています。
※各段落の先頭にある
④
[段 落 記 号 ]は 、[Delete]キ ー で 削 除 し ま す 。
文字サイズの変更
下図のように文字サイズを変更します。
「 +4」
「 +3」
「 +2」
⑤
Web ペ ー ジ の 保 存
［ フ ァ イ ル ］メ ニ ュ ー を ク リ
ッ ク し 、［ 名 前 を 付 け て 保 存 ］
をクリックします。
§5-21
［ 保 存 す る 場 所 ］ に 「 マイド
キ ュ メ ン ト 」 の 中 の
「 HTMLpractice」を 指 定 し 、
［フ
ァ イ ル 名 ］の 欄 に「 p1.htm」と
入力し、
します。
６
p1.htm
をクリック
Web ペ ー ジ を 開 く
ト ッ プ ペ ー ジ 「 index.htm」 を 呼 び 出 し ま し ょ う 。
(1)
ツールバーの
［開く］
をクリックします。
［開く］ダイアログボックスが表示されます。
(2)
［マイドキュメント］の中
の
[HTMLpractice]
か
ら
「 index.htm」を ク リ ッ ク し 、
をクリックし
ます。
画 面 に は 「 index.htm」 と 「 p1.htm」 が 開 い て い ま す 。［ ウ ィ ン ド ウ ］
メニューで切り替えられることを確認しましょう。
§5-22
７
水平線の挿入
「 水 平 線 」 を 挿 入 す る と 見 や す い Web ペ ー ジ に な り ま す 。 こ こ で は 、
「 index.htm」 に 水 平 線 を 挿 入 し ま し ょ う 。
(1) ［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
(2)
水平線を挿入する位置をクリックし、カーソルを表示させます。
(3)
［ナビメニュー］の［水平
線 の 挿 入 ］を ク リ ッ ク し ま す 。
［ 水 平 線 の 挿 入 ］ダ イ ア ロ グ ボ ッ ク ス が 表 示 さ れ ま す 。こ の ダ イ ア ロ グ
ボックスでは「水平線の太さ」や「水平線の幅」などを設定できます。
(4)
ここでは［水平線の太さ］
が 「 １ 」 ピ ク セ ル 、［ 水 平 線
の 幅 ］ が 「 100% 」 の ま ま
をクリックします。
水平線が挿入されます。
§5-23
(5)
同 様 に「 相 手 に 伝 え る た め
に 、絵 図 や 資 料 を 見 せ な が ら
話 す 。」 の 下 に 水 平 線 を 挿 入
しましょう。
参考
水平線の長さ（幅）について
水 平 線 の 長 さ は ピ ク セ ル 単 位（ 固 定 ）、ま た は ％（ ウ ィ ン ド ウ の 幅 に 対
する割合）で指定できます。ウィンドウの幅に対する割合で指定してお
くと利用者の環境が異なっても、同じように水平線を表示できます。
８
画像の挿入
デ ジ タ ル カ メ ラ な ど で 撮 っ た 画 像 を Web ペ ー ジ に 挿 入 す る こ と が で き ま
す。研修では、あらかじめ用意しておいた画像を作成中のページに挿入し
ま す 。 画 像 は 「 マ イ ド キ ュ メ ン ト 」 の 中 の 「 HTMLsample」 に 保 存 し て あ り
ます。
(1)
画像を挿入する場所をク
リ ッ ク し 、カ ー ソ ル を 表 示 さ
せます。
§5-24
(2)
［ナビメニュー］の［画像
フ ァ イ ル の 挿 入 ］を ク リ ッ ク
し 、［ フ ァ イ ル か ら ］ を ク リ
ックします。
(3)
［ファイルの場所］に「マイド
キ ュ メ ン ト 」 の 中 の 「 HTML
sample」を 指 定 し 、
「 h-dav3.jpg」
をクリックして
クリックします。
を
画像が挿入されます。
［中央揃え］をクリッ
ク し 、画 像 の 段 落 を 中 央 に 配
置しましょう。
§5-25
参考
画像のサイズを変更する方法
サイズを変更したい画像をクリックし、ハンドルを表示させます。ハ
ンドルにマウスポインタを合わせると
に な る の で 、ド ラ ッ グ し ま す 。
この時、画像の四隅のいずれかでドラッグをすると縦横の比率を変えず
にサイズ調整できます。
参考
画像の代替テキストについて
画像に代替テキストを設定しておくと、画像をポイントしたときにポ
ップヒントが表示されます。また、画像に対応していないブラウザを使
っ た り 、画 像 を 表 示 し な い よ う に ブ ラ ウ ザ の 設 定 を 変 更 し て い る 場 合 は 、
その画像の代わりに代替テキストが表示されます。
代 替 テ キ ス ト は 『 IBM ホ ー ム ペ ー ジ リ ー ダ ー 』 な ど の 「 音 声 読 み あ げ
ソフト」で読みあげられるので、視覚障害のある人でもどのような画像
が挿入されているか知ることができます。
このように、閲覧している人の環境の差違、障害の有無、年齢などに
かかわらず閲覧できるかどうかを踏まえて作成されているページは、
「ウ
ェ ブ ア ク セ シ ビ リ テ ィ 」 に 配 慮 し た Web ペ ー ジ と い え ま す 。
参考
ウェブアクセシビリティについて
ウェブアクセシビリティとは、高齢者や障害者など心身の機能に制約
の あ る 人 で も Web ペ ー ジ で 提 供 さ れ て い る 情 報 に 問 題 な く ア ク セ ス し 利
用できることを意味しています。
§5-26
代替テキストの設定方法は次のようにします。
(1)
代替テキストを設定する
画 像 を 選 択 し 、画 像 の 中 で 右
クリックします。
表示されるショートカッ
トメニューから［属性の変
更］をクリックします。
［属性］ダイアログボック
スが表示されます。
(2)
［画像］タブの［代替テキスト］
に「 ダ ビ ッ ト の 絵 」と 入 力 し ま す 。
ダビットの絵
練習
「 p1.htm」 に 「 マ イ ド キ ュ メ ン ト \HTMLsample」 か ら ミ レ ー と ル ノ ア ー
ルの画像を挿入し、代替テキストを次のように設定しましょう。
ファイル名
画像
代替テキスト
h-mle4.jpg
ミレーの絵
h-rno1.jpg
ルノアールの絵
§5-27
９
ボタンの挿入
図 形 に 効 果 を 加 え て ボ タ ン 状 に し た 画 像 フ ァ イ ル を「 ボ タ ン 」と い い ま す 。
こ こ で は 「 index.htm」 に
(1)
(2)
と
を挿入します。
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
最 下 行 で ［ Shift］ キ ー ＋
［ Enter］ キ ー を 押 し 、 ボ タ
ンを挿入する段落を作成し
ます。
(3)
［ナビメニュー］の［その
他 の 挿 入 ］を ク リ ッ ク し 、
［ボ
タ ン の 挿 入 ］を ク リ ッ ク し ま
す。
[ボ タ ン の 作 成 ]ダ イ ア ロ グ ボ ッ ク ス が 表 示 さ れ ま す 。
§5-28
[ボ タ ン の 作 成 ]ダ イ ア ロ グ
ボ ッ ク ス で は 、ボ タ ン に 表 示 す
る 文 字 を 入 力 し た り 、ボ タ ン の
サイズを変更することができ
ます。
ここでは初期値をそのまま
使用します。
(4)
をクリックします。
ボタンが作成されます。
(5)
同様に
ボタンを挿入します。
§5-29
(6)
練習
［右揃え］をクリックし、ボタンの段落を右に配置します。
「 p1.htm」 に
を挿入後、右揃えしましょう
§5-30
10
Web ペ ー ジ の 保 存 （ 上 書 き 保 存 ）
ペ ー ジ に ボ タ ン な ど の 素 材 を 挿 入 す る と 、 [上 書 き 保 存 ]の 際 に 、 ペ ー ジ と
合わせて素材の保存を行います。ここではボタンのファイル名を次のように
変更して保存します。
参考
button1.jpg
→
top.jpg
button2.jpg
→
next.jpg
ボタンのファイル名について
ボ タ ン の フ ァ イ ル 名 は 作 成 し た 順 番 に「 button1」、
「 button2」、・・・・・
というように、自動的に初期値の名前が付けられますが、そのまま保存
すると、同じ名前のボタンがあった場合に上書きされてしまいます。そ
のため、保存する時には、ボタンのファイル名をわかりやすく、重複し
ない名前に変更しましょう。
(1)
(2)
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
ツールバーの
［上書き保存］をクリックします。
［ 素 材 フ ァ イ ル を コ ピ ー し て 保 存 ］ダ イ ア ロ グ ボ ッ ク ス が 表 示 さ れ ま す 。
※ 画 像 フ ァ イ ル な ど が Web ペ ー ジ に 挿 入 さ れ て い る と 、 保 存 時 に こ の
ダイアログボックスが表示されます。
(3)
フ ァ イ ル 名 「 h-dav3.jpg 」 を ク リ ッ ク し 、 保 存 場 所 が 「 ・ ・ ・
\HTMLpractice\」 と な っ て い る こ と を 確 認 し ま す 。 も し 違 う 場 所 が 指 定
されていたら
をクリックし、保存場所を指定し直します。
クリック
確認
・・・・・････
［保存場所にファイルをコピーする］にもチェックが入っていることを
確認します。
§5-31
(4)
「 button1.jpg」 を ク リ ッ ク し ま す 。
クリック
・・・・・････
フ ァ イ ル 名 を 変 更 す る の で［ フ ァ イ ル 名 ］の 欄 に「 top.jpg」と 入 力 し
ます。
top.jpg と 入 力
・・・・・････
［ 保 存 場 所 ］ が 「 ・ ・ ・ \HTMLpractice\」 と な っ て い る か 確 認 し ま し
ょう。
［保存場所にファイルをコピーする］にチェックが入っていることも
確認しましょう。
(5)
「 button2.jpg」 を ク リ ッ ク し ま す 。
クリック
・・・・・････
§5-32
(6)
フ ァ イ ル 名 を 変 更 す る の で ［ フ ァ イ ル 名 ］ の 欄 に 「 next.jpg」 と 入 力
します。
next.jpg と 入 力
・・・・・････
［ 保 存 場 所 ］が「・・・\HTMLpractice\」と な っ て い る か 確 認 し ま し ょ
う。
［ 保 存 場 所 に フ ァ イ ル を コ ピ ー す る ］に チ ェ ッ ク が 入 っ て い る こ と も 確
認しましょう。
(7)
(8)
をクリックします。
［再編集用フォルダについて］ダイアログボックスが表示されるので
をクリックします。
参考
再編集用フォルダについて
ボタンやロゴなどを作成してページを保存すると、自動的に「＿
HPB_Recycled フ ォ ル ダ 」が 作 成 さ れ ま す 。こ の フ ォ ル ダ は ボ タ ン や ロ ゴ
などを再編集する際に使われます。
再 編 集 用 フ ォ ル ダ を 削 除 す る と 、後 か ら
［ボタンの編集］ができなくなります。
§5-33
続いて、
「 p1.htm」も［ 上 書 き 保 存 ］し ま す 。こ こ で は 、ボ タ ン の フ ァ
イル名を次のように変更して保存します。
button3.jpg
→
back.jpg
(1) ［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 p1.htm」 に 切 り 替 え ま す 。
(2)
ツールバーの
［上書き保存］をクリックします。
［ 素 材 フ ァ イ ル を コ ピ ー し て 保 存 ］ダ イ ア ロ グ ボ ッ ク ス が 表 示 さ れ ま す 。
(3)
フ ァ イ ル 名 「 h-mle4.jpg 」 を ク リ ッ ク し 、 保 存 場 所 が 「 ・ ・ ・
\HTMLpractice\」 と な っ て い る こ と を 確 認 し ま す 。 更 に ［ 保 存 場 所 に フ
ァイルをコピーする］にチェックが入っていることも確認します。
・・・・・････
(4)
フ ァ イ ル 名 「 h-rno1.jpg 」 を ク リ ッ ク し 、 保 存 場 所 が 「 ・ ・ ・
\HTMLpractice\」 と な っ て い る こ と を 確 認 し ま す 。 更 に ［ 保 存 場 所 に フ
ァイルをコピーする］にチェックが入っていることも確認します。
・・・・・････
§5-34
(5)
「 button3.jpg」 を ク リ ッ ク し ま す 。
・・・・・････
(6)
ファイル名を変更するの
で［ファイル名］の欄に
「 back.jpg」 と 入 力 し ま す 。
back.jpg と 入 力
(7)
(8)
・・・・・････
をクリックします。
［再編集用フォルダについて］ダイアログボックスが表示されるので
をクリックします。
§5-35
Ⅳ
リンクの設定
１
リ ン ク の 設 定 （ ペ ー ジ や URL へ の リ ン ク の 設 定 ）
文字や画像をクリックすると、別のページやファイルが表示される仕組み
を「リンク」といいます。ジャンプする起点を「リンク元」、ジャンプする
先を「リンク先」といいます。指定できるリンク先には次のようなものがあ
ります。
・ 別 の Web ペ ー ジ
・ 同 じ Web ペ ー ジ 内 の 別 の 場 所
・ 別 の Web サ イ ト
・ HTML フ ァ イ ル 以 外 の フ ァ イ ル
・電子メールの作成画面
ここでは下図のように、３ヶ所リンクを設定します。
(1)
index.htm
p1.htm
(3)
別 の Web サ イ ト 「 イ ン タ ー ネ ッ ト 美 術 館 」 へ
§5-36
(2)
(1)「 index.htm」 か ら 「 p1.htm」 へ の リ ン ク
ト ッ プ ペ ー ジ 「 index.htm」 の
を ク リ ッ ク す る と 「 p1.htm」 を
表示するようにリンクを設定します。
①
②
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
を 選 択 し 、［ ナ ビ メ ニ
ュ ー ］の［ リ ン ク の 挿 入 ］を
クリックします。
[リ ン ク 作 成 ウ ィ ザ ー ド ]が 表 示 さ れ ま す 。
③ ［ ペ ー ジ や URL へ の リ ン ク を
作 成 す る ］が 選 択 さ れ て い る
ことを確認して
をクリックします。
④
をクリックします。
［ リ ン ク ウ ィ ザ ー ド （ 文 字 列 、 画 像 フ ァ イ ル の 設 定 ）］ ダ イ ア ロ グ ボ ッ
クスは、リンク元を設定するための画面です。ここでは既に
択しているのでグレーアウトで表示されています。
§5-37
を選
⑤
「 リ ン ク 先 」を 指 定 す る の で
をクリックしま
す。
⑥
［ フ ァ イ ル か ら ］を ク リ ッ ク
します。
［開く］ダイアログボックスが表示されます。
⑦
「 p1.htm」 を 選 択 し 、
をクリックします。
リンク先ファイル名が指定されます。
⑧
をクリックします。
※［上書き保存］しましょう。
§5-38
参考
ターゲットについて
リンクしたファイルを、どの場所（ウィンドウ）に表示させるかを設
定するものです。
研修では、ターゲットは使用しません。
参考
リンクの確認
「プレビュー」でリンクが正しく設定されているか確認できます。リンク
設定後に「上書き保存」をしていないと、正しい動作確認ができない場合が
あるので注意しましょう。
①
［ プ レ ビ ュ ー ］タ ブ を ク リ ッ
クします。
にマウスポ
インタを合わせると
に
なるのでクリックします。
②
リンク先ページが表示され
ます。
で前の画面に戻る
ことができます。
※確認が終わったら［ページ
編集］タブをクリックして
おきましょう。
§5-39
参考
リンクの解除について
リンクの解除は、ショートカットメニューからできます。リンク元を
右クリックし、表示されるショートカットメニューの中から［リンクの
解除］をクリックします。
ま た 、 シ ョ ー ト カ ッ ト メ ニ ュ ー の 中 か ら [リ ン ク の 設 定 ]を ク リ ッ ク す
ると、リンク先の変更もできます。
(2)「 p1.htm」 か ら 「 index.htm」 へ の リ ン ク
「 p1.htm」 の
を ク リ ッ ク す る と 「 index.htm」 を 表 示 す る よ う に
リンクを設定します。
①
②
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 p1.htm」 に 切 り 替 え ま す 。
を 選 択 し 、［ ナ ビ メ ニ
ュ ー ］の［ リ ン ク の 挿 入 ］を
クリックします。
リンク作成ウィザードが表示されます。
§5-40
③ ［ ペ ー ジ や URL へ の リ ン ク を
作 成 す る ］が 選 択 さ れ て い る
ことを確認して
をクリックします。
④
をクリックしま
す。
⑤
「 リ ン ク 先 」を 指 定 す る の で
をクリックしま
す。
⑥
［ フ ァ イ ル か ら ］を ク リ ッ ク
します。
［開く］ダイアログボックスが表示されます。
⑦
「 index.htm 」 を 選 択 し 、
をクリックします。
§5-41
リンク先ファイル名が指
定されます。
をクリックしま
⑧
す。
※ ［ 上 書 き 保 存 ］ を し 、 [プ レ ビ ュ ー ]タ ブ に 切 り 替 え て リ ン ク の 確 認
を し ま し ょ う 。 そ の 後 、 [ペ ー ジ 編 集 ]タ ブ に 戻 し て お き ま す 。
(3)「 p1.htm」 か ら 「 イ ン タ ー ネ ッ ト 美 術 館 」 へ の リ ン ク
「 p1.htm」 の 《 自 分 の 好 き な 絵 を 探 そ う ！ 》 を ク リ ッ ク す る と Web ペ
ージ「インターネット美術館」を表示するようにリンクを設定します。
①
《自分の好きな絵を探そ
う ！ 》 を 選 択 し 、［ ナ ビ メ ニ
ュ ー ］の［ リ ン ク の 挿 入 ］を
クリックします。
リンク作成ウィザードが表示されます。
② ［ ペ ー ジ や URL へ の リ ン ク を
作 成 す る ］が 選 択 さ れ て い る
ことを確認して
をクリックします。
§5-42
③
をクリックしま
す。
④
［ リ ン ク 先 ］の URL を 入 力 し
ます。
http://www.nipec.niigata.niigata.jp/cec/
internetbizyutukan/index.htm
⑤
参考
をクリックします。
別 の Web サ イ ト に リ ン ク を 設 定 す る
④ の よ う に 、 リ ン ク 先 の URL を 直 接 入 力 す る 方 法 の 他 に 、 あ ら か じ め
リ ン ク を 設 定 し た い Web サ イ ト を ブ ラ ウ ザ で 表 示 し 、
の「 URL
をブラウザより取得」をクリックして設定する方法もあります。
参考
リンクを設定するときのマナー
別 の Web サ イ ト に リ ン ク を 設 定 す る と き に は 、 そ の Web サ イ ト の 管 理
者 に 許 可 を 取 る 必 要 が あ り ま す 。た だ し 、
「 リ ン ク フ リ ー 」と 明 記 し て あ
るものに関しては、特に許可を取る必要はありません。
リ ン ク を 設 定 し た Web サ イ ト を 表 示 さ せ る と き は 、 別 の ウ ィ ン ド ウ に
します。ターゲットで「新しいウィンドウ」を設定します。
§5-43
リンクを設定した部分の
文字の色が変更されます。
※ ［ 上 書 き 保 存 ］ を し 、 [プ レ ビ ュ ー ]タ ブ に 切 り 替 え て リ ン ク の 確 認
を し ま し ょ う 。 そ の 後 、 [ペ ー ジ 編 集 ]タ ブ に 戻 し て お き ま す 。
§5-44
２
リンクの設定（ラベルへのリンクの設定）
Web ペ ー ジ の 特 定 の 場 所 に ジ ャ ン プ さ せ た い と き は 、「 ラ ベ ル 」を 作 成 し 、
リンクを設定します。１ページが長くなるようなときに使うと効果的です。
「ラベル」とは、リンク先（リンクの着地点）です。
ま た 、 別 の Web ペ ー ジ の ラ ベ ル に リ ン ク を 設 定 す る こ と も で き ま す 。 ラ ベ
ルへのリンクの設定は、最初にラベルを設定し、そのあとでリンクを設定し
ます。
index.htm
p1.htm
ラベルの設定
ラ ベ ル 名 ： gallery
ラベルの設定
ラ ベ ル 名 ： digital
(2)
(1)
こ こ で は 、ト ッ プ ペ ー ジ「 index.htm」の「 － デ ジ タ ル コ ン テ ン ツ を 利 用 し
て － 」に 、ラ ベ ル「 digital」を 設 定 し て 、同 じ Web ペ ー ジ 内 の
をクリッ
ク す る と 「 digital」 に ジ ャ ン プ す る よ う に リ ン ク を 設 定 し ま す 。
ま た 、「 p1.htm」の「 イ ン タ ー ネ ッ ト 美 術 館 」に ラ ベ ル「 gallery」を 設 定
し て 、ト ッ プ ペ ー ジ「 index.htm」の「 世 界 の 名 画 を 比 較 す る こ と が で き 、簡
単 に 利 用 で き る 。」を ク リ ッ ク す る と「 gallery」に ジ ャ ン プ す る よ う に リ ン
クを設定します。
§5-45
(1)
同一ページ内のラベルへのリンク
初めにラベルを設定します。
①
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、 「 index.htm」 に 切 り 替 え ま す 。
② 「－デジタルコンテンツを利
用して－」を範囲選択して
［ ナ ビ メ ニ ュ ー ］の［ リ ン ク
の挿入］をクリックします。
③
［ ラ ベ ル を 作 成 す る ］を 選 択
し、
します。
をクリック
④ ［ ラ ベ ル を 付 け る ］を 選 択 し 、
をクリックしま
す。
⑤
ラ ベ ル 入 力 欄 に 「 digital」
digital
と入力します。
⑥
をクリックしま
す。
§5-46
ラベルを設定した部分に点
線が表示されます。
⑦
を ク リ ッ ク し 、［ ナ ビ
メ ニ ュ ー ］の［ リ ン ク の 挿 入 ］
をクリックします。
⑧
［ ラ ベ ル を 作 成 す る ］を 選 択
し、
します。
をクリック
⑨ ［ラベルへのリンクを作成す
る］を選択し、
をクリックします。
§5-47
⑩
［ ラ ベ ル ］の 右 に あ る
を
ク リ ッ ク し 、ラ ベ ル の 一 覧 か
ら 「 digital」 を 選 択 し ま す
⑪
をクリックします。
※ ［ 上 書 き 保 存 ］ を し て 、［ プ レ ビ ュ ー ］ タ ブ で 確 認 し 、 そ の 後 [ペ ー
ジ 編 集 ]タ ブ に 戻 し て お き ま し ょ う 。
(2)
別ページのラベルへのリンク
初めにラベルを設定します。
① ［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 p1.htm」 に 切 り 替 え ま す 。
② 「インターネット美術館」を
範囲選択し、
［ナビメニュー］
の［ リ ン ク の 挿 入 ］を ク リ ッ
クします。
③ ［ラベルを作成する］を選択
し、
します。
をクリック
④ ［ ラ ベ ル を 付 け る ］を 選 択 し 、
をクリックし
ます。
§5-48
⑤
ラ ベ ル 入 力 欄 に 「 gallery」
と入力します。
gallery
をクリックします。
⑥
ラベルを設定した部分に点線が表示されます。
※ ［上書き保存］しましょう。
⑦ ［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
⑧ 「世界の名画を比較すること
が で き 、簡 単 に 利 用 で き る 。」
を 選 択 し 、［ ナ ビ メ ニ ュ ー ］
の［ リ ン ク の 挿 入 ］を ク リ ッ
クします。
⑨ ［ラベルを作成する］を選択
し、
します。
をクリック
§5-49
⑩ ［ラベルへのリンクを作成す
る］を選択し、
をクリックします。
⑪
別のファイル内にあるラベ
ル を 指 定 す る の で 、［ 他 の フ
ァ イ ル ］ の 右 に あ る
をクリックしま
す。
⑫ ［ファイルから］をクリック
します。
⑬ 「 p1.htm」を 選 択 し 、
をクリックします。
⑭ 「 p1.htm」 が 指 定 さ れ ま す 。
§5-50
⑮ ［ラベル］の右にある
を
ク リ ッ ク し 、ラ ベ ル の 一 覧 か
ら「 gallery」を 選 択 し ま す 。
⑯
をクリックします。
※［ 上 書 き 保 存 ］を し て 、
［ プ レ ビ ュ ー ］タ ブ で 確 認 し ま し ょ う 。そ の
後 、 [ペ ー ジ 編 集 ］ タ ブ に 戻 し て お き ま し ょ う 。
§5-51
３
ブラウザで確認
ツールバーにある
を ク リ ッ ク す る と Internet Explorer が 自 動 的 に 起
動して、現在開いているページがどのように表示されるかを確認できます。
(1)
ツールバーの
[ Internet
Explorer の 起 動 ]を ク リ ッ ク
します。
(2)
Internet Explorer が 起 動
し、ページが表示されます。
(3)
確 認 が 終 わ っ た ら Internet
Explorer を 閉 じ ま し ょ う 。
§5-52
Ⅴ
ページの編集
index.htm
ロゴの作成
壁紙の設定
動画の挿入
p1.htm
ロゴの作成
表の作成
§5-53
１
壁紙の挿入
ページの背景に貼り付けた画像ファイルを「壁紙」といいます。壁紙はブ
ラウザのウィンドウいっぱいにタイル上に敷き詰められます。ホームペー
ジ・ビルダーにあらかじめ用意されている画像や手持ちの画像を壁紙に設定
できます。
こ こ で は 、 ト ッ プ ペ ー ジ 「 index.htm 」 に 「 HTMLsample 」 フ ォ ル ダ の
「 kabegami.jpg」 を 設 定 し ま す 。
(1)
「 index.htm」 が 表 示 さ れ て い る こ と を 確 認 し ま す 。
(2)
［ナビメニュー］の［壁紙
の 挿 入 ］ を 選 択 し 、［ フ ァ イ
ルから］をクリックします。
(3) 「 マ イ ド キ ュ メ ン ト 」 の 中
の「 HTMLsample」フ ォ ル ダ に
あ る「 kabegami.gif」を 選 択
し、
をクリックしま
す。
背景に壁紙が設定されます。
※［上書き保存］しましょう。
§5-54
参考
(1)
壁紙を削除する方法について
［ 編 集 ］メ ニ ュ ー の［ 背 景 /
文 字 色 の 設 定 ］を ク リ ッ ク し
ます。
［属性］ダイアログボックス
が表示されます。
(2)
［背景画像］として指定さ
れ て い る フ ァ イ ル 名 を
［ delete］キ ー な ど で 削 除 し
ます。
(3)
削除
をクリックしま
す。
参考
ページの背景について
ページの背景は壁紙以外に、「色」を設定することで見栄えをよくす
ることができます。背景色の設定方法は以下のとおりです。
(1)
［ 編 集 ］メ ニ ュ ー の［ 背 景 /
文 字 色 の 設 定 ］を ク リ ッ ク し
ます。
(2)
［ 背 景 ］の 右 に あ る
を
ク リ ッ ク し 、パ レ ッ ト か ら 色
を選択します。
※背景色と文字色のコント
ラストは、はっきりと見や
すいものにしましょう。
§5-55
なお、同じ画面にある
をクリックすると、背景色と
文字色の組み合わせを選択することができます。
２
ロゴの作成
文字に効果を加えて画像ファイルにしたものを「ロゴ」といいます。強調
したい文字をロゴにすると見栄えがします。
ロゴを作成すると、ロゴの周囲と背景がなじむように自動的に処理されま
す。ロゴを作成した後に壁紙や背景を設定すると自動調整されません。壁紙
や背景はロゴの作成前に設定しておきましょう。
こ こ で は 、「 index.htm」 の 「 世 界 の 名 画 に 親 し む 」 と 「 p1.htm」 の 「 学 習
の流れ
(1)
－導入－」をロゴにします。
ロゴを作成する位置にカ
ーソルを表示させます。
§5-56
(2) ［ ナ ビ メ ニ ュ ー ］の［ ロ ゴ (飾
り 文 字 )の 挿 入 ］ を ク リ ッ ク
します。
［ロゴの作成］ダイアログ
ボックスが表示されます。
(3)
ロゴにする文字列を入力し
ます。
世界の名画に親しむ
(4)
［文字の大きさ］のつまみ
を ド ラ ッ グ し 、大 き さ を 変 更
します。
図 は 32 に し て い ま す 。
§5-57
(5)
ロゴのパターンを選択し
ます。
を ク リ ッ ク し 、任
意のパターンをクリックし
ます。
(6)
(7)
をクリックします。
文 字 列「 世 界 の 名 画 に 親 し
む」を削除します。
参考
ロゴの代替テキストについて
ロゴを作成する際に入力した文字列が、ロゴの代替テキストとして自
動的に設定されます。
§5-58
※ ［上書き保存］しましょう。
※ ペ ー ジ を 上 書 き 保 存 す る 際 に 、作 成 し た ロ ゴ が 素 材 フ ァ イ ル と し て
保 存 さ れ ま す 。ロ ゴ の フ ァ イ ル 名 を 、わ か り や す く 重 複 し な い 名 前
に変更しましょう。
（［ 素 材 フ ァ イ ル を コ ピ ー し て 保 存 ］ダ イ ア ロ グ ボ ッ ク ス の 操 作 は 、
§5-31 を 参 照 ）
例 ： logo1.gif
→
meiga.gif
････････
画 面 を 「 p1.htm」 に 切 り 替 え 、 同 様 に 「 学 習 の 流 れ
－導入－」をロ
ゴに設定して［上書き保存］しましょう。
ロ ゴ の フ ァ イ ル 名 は 「 gakusyu.gif」 に し ま す 。
３
動画ファイルの挿入
こ こ で は「 index.htm」に「 HTMLsample」フ ォ ル ダ の「 millet.mov」を 挿 入
します。
(1)
(2)
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 index.htm」 に 切 り 替 え ま す 。
動画を挿入する場所にカ
ーソルを表示します。
§5-59
(3)
［ナビメニュー］の［ファ
イ ル の 挿 入 ］ を 選 択 し 、［ ビ
デ オ フ ァ イ ル ］を ク リ ッ ク し
ます。
［開く］ダイアログボックスが表示されます。
(4)
［ファイルの場所］に「マ
イ ドキュメント」の中の
「 HTMLsample」を 指 定 し ま す 。
表示されるファイルの中
か ら「 millet.mov」を 選 択 し 、
をクリックします。
(5)
動画が挿入されます。
ここで［上書き保存］しましょう。
§5-60
(6)
動 画 の 自 動 再 生 を OFF に し 、表 示 サ イ ズ を 変 更 し ま す 。こ こ で は［ HTML
ソース］タブに切り替え、直接タグを入力して訂正します。
［訂正前のタグの記述内容］
<EMBED src="millet.mov" type="video/quicktime">
［訂正後のタグの記述内容］
（実際は一行に続けて記述します。）
<EMBED src="millet.mov" type="video/quicktime" autoplay="off"
width="320"
height="255">
・ autoplay off･･･自 動 再 生 を OFF に す る
・ width･･････････幅 （ 単 位 ： ﾋﾟｸｾﾙ）
・ height･････････高 さ （ 単 位 ： ﾋﾟｸｾﾙ）
［ HTML ソ ー ス ］ タ ブ を ク リ ッ ク し 、「 type="video/quicktime"」 の 直 後
にカーソルを表示します。
type=” video/quicktime” |></p>
(7)
図のようにタグを追加し
ま す 。タ グ は 全 て 半 角 英 数 字
で 入 力 し ま す 。（ △ は 半 角 ス
ペース）
△ autoplay=” off” △ width=” 320” △ height=” 255”
§5-61
(8)
［ページ編集］シートに切
り 替 え 、画 像 の 段 落 を［ 中 央
揃え］にします。
(9)
［プレビュー］タブをクリ
ックします。
動画の再生ウィンドウにあ
る
をクリックすると再生
が始まります。
確認が終わったら［ページ編集］シートに切り替え、［上書き保存］し
ましょう。
４
表の挿入
項目ごとに数値データを表示したり、レイアウトを整えたりするときに
「表」を使用すると効果的です。
表の各部の名称は次のとおりです。
セル
行
列
§5-62
こ こ で は 「 p1.htm」 に ２ 行 ×２ 列 の 表 を 作 成 し 、 画 像 と 説 明 文 を レ イ ア ウ
トします。
＜完成例＞
(1)
(2)
［ ウ ィ ン ド ウ ］ メ ニ ュ ー を ク リ ッ ク し 、「 p1.htm」 に 切 り 替 え ま す 。
表を挿入する位置にカー
ソルを表示します。
(3)
［ナビメニュー］の［表の
挿入］をクリックします。
§5-63
［表の挿入］ダイアログボックスが表示されます。
(4)
行 数 、列 数 と も に「 ２ 」で
あることを確認し、
をクリックします。
※ 枠 線 を 表 示 し た く な い 場 合 は 、「 表 の 枠 を 表 示 す る 」の チ ェ ッ ク を 外
します。
表が挿入されます。
挿入した表のセルに、画像と文章を移動します。
(5)
「落ち穂拾い」の画像を選
択 し ま す 。画 像 の 中 で 右 ク リ
ッ ク を し 、表 示 さ れ た シ ョ ー
ト カ ッ ト メ ニ ュ ー か ら［ 切 り
取り］をクリックします。
§5-64
(6)
表の左上のセルを選択し
ま す 。選 択 し た セ ル の 中 で 右
ク リ ッ ク を し 、表 示 さ れ た シ
ョートカットメニューから
［ 貼 り 付 け ］を ク リ ッ ク し ま
す。
セルの中に画像が移動し
ます。
(7)
文 字 列 「〔 写 実 主 義 〕
ミ
レ ー ／ 落 穂 拾 い 」を 選 択 し ま
す 。選 択 し た 中 で 右 ク リ ッ ク
を し 、表 示 さ れ た シ ョ ー ト カ
ットメニューから［切り取
り］をクリックします。
(8)
表の右上のセルを選択し
ま す 。選 択 し た セ ル の 中 で 右
ク リ ッ ク を し 、表 示 さ れ た シ
ョートカットメニューから
［ 貼 り 付 け ］を ク リ ッ ク し ま
す。
§5-65
セルの中に文字列が移動し
ます。
(9)
同様の操作で残りの画像と
文字列を表のそれぞれのセ
ルに移動します。
※ 画 像 の 大 き さ を 調 整 し 、［ 上 書 き 保 存 ］ し ま し ょ う 。
※ 最 後 に ［ Internet Explorer の 起 動 ］ ボ タ ン
ラウザ上での表示を確認しましょう。
§5-66
をクリックしてブ