<4D6963726F736F667420576F7264202D208AAE90AC94C5837A815B83808379815B83578DEC90AC3034303630312E646F63>

5 HTML の 基 礎 Ⅰ Web ページ 作 成 の 準 備 1 HTML とは 1 2 Web ページの 構 成 1 3 Windows の 設 定 変 更 2 4 サンプルページの 確 認 4 Ⅱ ホームページ ビルダー8について 1 画 面 構 成 5 2 編 集 モード 8 Ⅲ Web ページの 作 成 1 Web ページの 新 規 作 成 9 2 ページタイトルの 設 定 10 3 文 字 の 挿 入 11 4 文 字 の 編 集 14 5 Web ページの 保 存 ( 名 前 を 付 けて 保 存 ) 19 6 Web ページを 開 く 22 7 水 平 線 の 挿 入 23 8 画 像 の 挿 入 24 9 ボタンの 挿 入 28 10 Web ページの 保 存 ( 上 書 き 保 存 ) 31 Ⅳ リンクの 設 定 1 リンクの 設 定 (ページや URL へのリンクの 設 定 ) 36 2 リンクの 設 定 (ラベルへのリンクの 設 定 ) 45 3 ブラウザで 確 認 52 Ⅴ ページの 編 集 1 壁 紙 の 挿 入 54 2 ロゴの 作 成 56 3 動 画 ファイルの 挿 入 59 4 表 の 挿 入 62

Ⅰ Web ページ 作 成 の 準 備 1 HTML とは HTML(Hyper Text Markup Language)は Web ページの 構 造 や 体 裁 を 定 義 す る 言 語 です HTML を 使 って 記 述 されたファイルを HTML ファイル といいま す HTML は タグ と 呼 ばれる 命 令 で 記 述 されています このタグは 文 字 や 画 像 などの 情 報 を どのようにブラウザ 上 で 表 示 するかを 記 述 したものです 現 在 表 示 されている Web ページを HTML 形 式 で 表 示 するには ブラウザの[ 表 示 ]メニューを 選 択 し [ソース]をクリックします HTML を 知 らなくても ホームページ ビルダーなどの Web ページ 作 成 ソフトを 使 用 すると ワープ ロ 感 覚 で Web ページを 作 成 していくことができます 2 Web ページの 構 成 Web ページは 基 本 となる HTML ファイルの 他 に 画 像 ファイル 音 声 ファイ ルなど 複 数 のファイルから 構 成 されています Web ページ 内 に 画 像 がある 場 合 どのフォルダの 何 という 画 像 ファイル を 表 示 する というタグが 記 述 されているために 画 像 ファイルが 他 のフォ ルダへ 移 動 したり そのフォルダから 削 除 されると Web ページ 上 では 画 像 が 表 示 されなくなりますので 注 意 しましょう 下 図 は 基 本 となる HTML ファイル index.htm に 画 像 ファイル h-dav3.jpg が 組 み 合 わされて 表 示 されている Web ページです index.htm h-dav3.jpg 5-1

3 Windows の 設 定 変 更 (1) 拡 張 子 を 表 示 する Web ページの 作 成 では 様 々なファイルの 種 類 を 使 用 します あらかじ めファイルの 拡 張 子 が 表 示 されるように Windows の 設 定 を 変 更 しておき ましょう 拡 張 子 はファイル 名 の 後 ろに 付 いている. (ピリオド)と それに 続 く 英 数 字 のことで ファイルの 種 類 を 表 しています 1 デスクトップにある[マ イコンピュータ]をダブル クリックします 2 [ツール]メニューを 選 択 し [フォルダオプション] をクリックします 3 [ 表 示 ]タブをクリックし ます 4 [ 詳 細 設 定 ]の 中 の[ 登 録 されている 拡 張 子 は 表 示 し ない]のチェックを 外 しま す (2) ディスプレイの 解 像 度 Web ページの 表 示 は ディスプレイのサイズや 解 像 度 によって 異 なりま す 最 も 普 及 している 800 600 ピクセルまたは 1024 768 ピクセ ルに 設 定 して Web ページを 作 成 しましょう 1 デスクトップの 何 も 表 示 されていない 部 分 で 右 クリックします 2 表 示 されるショートカットメニューの 中 から[プロパティ]をクリッ クします 3 [ 設 定 ]タブをクリックします 5-2

4 [ 画 面 の 解 像 度 ]のつまみ をドラッグして 設 定 します 県 立 教 育 センターの 研 修 環 境 では Windows の 設 定 変 更 はできません ( 設 定 済 みです ) 5-3

4 サンプルページの 確 認 リンクの 状 態 を 調 べ 図 に 矢 印 を 書 き 入 れましょう ファイル 名 p1.htm ページタイトル 名 学 習 の 流 れ- 導 入 - ファイル 名 index.htm ページタイトル 名 世 界 の 名 画 に 親 しむ 参 考 ページタイトルについて Web ページを Internet Explorer などのブラウザで 表 示 すると タイトルバーに ページタイトルが 表 示 されます また ブラウザで お 気 に 入 り や ブックマー ク にページを 登 録 すると ページタイトルが 登 録 されます 5-4

Ⅱ ホームページ ビルダー8について 1 画 面 構 成 からホームページ ビルダーを 選 択 して 起 動 すると 下 図 の 画 面 が 起 動 します 1 1 編 集 スタイル ホームページ ビルダー8では 3つの 編 集 スタイルを 選 択 できます 編 集 スタイルを 選 択 するまでは 他 の 機 能 は 使 用 できません ア かんたん 編 集 スタイル 初 心 者 向 けの 編 集 スタイルです わかりやすいメニューと 大 きめの ツールボタンで 簡 単 に Web ページを 作 成 できます ただし 使 用 できる 機 能 が 限 定 されています イ スタンダード 編 集 スタイル 初 級 者 から 上 級 者 まで 使 用 する 標 準 の 編 集 スタイルです ナビメニュ ーやメニューバーを 使 用 して Web ページを 作 成 できます ウ エディターズ 編 集 スタイル 上 級 者 向 けのスタイルです 初 心 者 用 のメニューを 表 示 しないため 画 面 領 域 を 広 く 使 って 作 業 できます HTML を 直 接 記 述 して Web ページを 作 成 します 研 修 では スタンダード 編 集 スタイルを 使 用 します 5-5

1 2 5 4 3 6 7 8 9 1 タイトルバー 起 動 中 のアプリケーションソフト 名 現 在 開 いているページのファイル 名 ページタイトルが 表 示 されます 2 メニューバー コマンドを 実 行 するときに 使 用 します 作 業 状 況 により 表 示 されるメニ ューが 異 なります 3 かんたんナビバー よく 使 う 機 能 がページ 作 成 の 流 れにそって 順 に 表 示 されています 各 ボタンをクリックするとダイアログボックスが 表 示 されます 4 ツールバー コマンドを 実 行 するときに 使 用 します よく 使 うコマンドがボタンとし て 登 録 されています 5 ナビメニュー ページ 作 成 の 際 によく 使 う 機 能 を 登 録 したもので リンクや 画 像 などを 挿 入 するときに 使 用 します 5-6

6 素 材 集 ページに 素 材 を 挿 入 する 時 などに 使 用 します 7 ページ 編 集 領 域 ページを 編 集 するときに 使 用 します ページ 編 集 領 域 にはタブがあり ページの 作 成 方 法 や 行 いたい 作 業 に 合 わせてタブを 切 り 替 えて 作 業 しま す 編 集 スタイルが スタンダード の 時 に 表 示 されるタブは4つです ページ 編 集 タブ HTML ソースタブ ワープロソフト 感 覚 でページを 作 成 できます ページ 編 集 タブでページを 作 成 すると 自 動 的 に HTML ソースが 生 成 されます この HTML を 直 接 編 集 してページを 作 成 することもできます ページ/ソースタブ 画 面 が 上 下 に 分 かれ 上 側 に ページ 編 集 タ ブ 下 側 に HTML ソース タブと 同 じ 内 容 が 表 示 されます プレビュータブ 編 集 中 のページが ブラウザではどのように 表 示 されるかを 確 認 できます 8 属 性 /ドキュメントアウトライナ/ページ 一 覧 属 性 タブと ドキュメントアウトライナ タブでは 選 択 中 の 文 字 表 画 像 などの 設 定 を 変 更 できます ページ 一 覧 タブでは 編 集 中 の Web ページが 一 覧 表 示 されます 属 性 /ドキュメントアウトライナ/ページ 一 覧 が 表 示 されていたら 閉 じましょう 9 ステータスバー 現 在 の 作 業 状 況 や 処 理 手 順 が 表 示 されます 5-7

2 編 集 モード ホームページ ビルダーには どこでも 配 置 モード と 標 準 モード の2つの 編 集 モードがあります 標 準 モード 操 作 方 法 が Microsoft Word などのワープロソフトに 似 ています 文 字 や 画 像 を 挿 入 すると 左 端 に 配 置 されるので その 後 表 示 位 置 を 変 更 します 文 字 や 画 像 などのレイアウトを 整 えたいときは 表 を 使 って 配 置 します ブラウザのウィンドウ 幅 を 変 更 すると 文 字 や 画 像 の 配 置 は 自 動 的 に 調 整 されます どこでも 配 置 モード 操 作 方 法 が Microsoft PowerPoint などの 作 図 ソフトに 似 ています 文 字 や 図 形 などをマウス 操 作 で 自 由 に 配 置 できますが ブラウザのウィンド ウ 幅 を 変 えても 文 字 や 画 像 の 位 置 は 固 定 されたままです 研 修 では 標 準 モード を 使 用 します 5-8

Ⅲ Web ページの 作 成 1 Web ページの 新 規 作 成 (1) ツールバーの[HTML の 新 規 作 成 ]をクリックします (2) [ 標 準 モード]を 選 択 して をクリックします 新 しい Web ページが 表 示 されます 5-9

2 ページタイトルの 設 定 (1) メニューバーの[ 編 集 ]を クリックし [ページの 属 性 ] をクリックします [ 属 性 ]ダイアログボックスが 表 示 されます (2) [ページ 情 報 ]タブの[ペ ージタイトル]に 世 界 の 名 画 に 親 しむ と 入 力 し をクリックしま す 世 界 の 名 画 に 親 しむ 入 力 したページタイトルがタイトルバーに 表 示 されます 世 界 の 名 画 に 親 しむ 5-10

3 文 字 の 挿 入 文 字 は フォーカス 枠 で 囲 まれる 段 落 に 入 力 します 文 字 を 入 力 し 確 定 するとフォーカス 枠 が 自 動 的 に 表 示 されます 参 考 段 落 について 文 字 の 配 置 は 段 落 単 位 で 設 定 します また 段 落 を 削 除 するにはフォーカス 枠 内 の 文 字 をすべて 削 除 します 参 考 編 集 中 の 改 行 改 段 について 同 じ 段 落 内 での 改 行 は[Enter]キーを 押 し 段 落 を 改 めるときは[Shift] キー+[Enter]キーを 押 します 改 段 すると 段 落 と 段 落 の 間 には1 行 分 の 間 隔 が 空 きます 操 作 画 面 上 の 表 示 など 改 行 [Enter]キーのみを 押 す 段 落 の 中 での 行 改 めで 次 の 行 との 間 に 空 白 行 はできません 改 段 [Shift]キー+[Enter]キーを 押 す 段 落 と 段 落 の 間 には1 行 分 の 空 白 行 ができます (1) カーソルが 先 頭 にあるこ とを 確 認 します 世 界 の 名 画 に 親 しむ と 入 力 します (2) [Shift]キー+[Enter] キーを 押 し 改 段 します 5-11

以 降 の 文 章 は 一 太 郎 ファイルで 用 意 してありますので[コピー]&[ 貼 り 付 け]で 本 文 を 作 成 していきます (3) ホームページビルダーを 最 小 化 します (4) マイドキュメント の 中 の HTMLsample フォルダにある HTML 本 文.jtd を 開 きます (5) -デジタルコンテンツを 利 用 して- から1ページの 終 わ り 絵 画 を 発 表 し 合 う までを 範 囲 選 択 し ツー ルバーの [コピー]をクリ ックします (6) タスクバーの ホームペー ジ ビルダー ボタンをクリッ クし 画 面 を 切 り 替 えます 5-12

(7) 2 段 落 目 の 先 頭 にカーソルがあるのを 確 認 し ツールバーの [ 貼 り 付 け]をクリックします (8) 次 のように[Shift]キー+[Enter]キーを 押 し 改 段 します 枠 は 段 落 を 表 しています 各 段 落 の 先 頭 にある [ 段 落 記 号 ]は [Delete]キーで 削 除 します 5-13

参 考 操 作 の 取 り 消 しとやり 直 しについて 文 字 の 入 力 や 画 像 の 挿 入 などの 編 集 操 作 を 間 違 えたときは Word などと 同 様 に 直 前 の 操 作 を 取 り 消 してひとつ 前 の 状 態 に 戻 すことができます また 取 り 消 した 操 作 を 再 び 行 うこともできます 直 前 の 操 作 を 取 り 消 すとき は ツールバーの [ 元 に 戻 す]をクリックします 取 り 消 した 操 作 を 再 び 実 行 するときは ツールバーの [やり 直 し]をクリック します 4 文 字 の 編 集 (1) 文 字 サイズの 変 更 文 字 サイズを 変 更 するにはブラウザで 設 定 されている 標 準 の 文 字 サイ ズに 対 して 大 きくするか 小 さくするかを 指 定 します 通 常 の 文 字 サイズ を 3 として 1 から 7 の7 段 階 からサイズを 指 定 します 世 界 の 名 画 に 親 しむ を 通 常 の 文 字 サイズより4 段 階 大 きくし 7 にします 1 世 界 の 名 画 に 親 しむ を 範 囲 選 択 します 5-14

2 [ツールバー]の [ 文 字 サイズ 拡 大 ]を4 回 クリック します 文 字 に 書 式 を 設 定 すると 段 落 のフォーカス 枠 とは 別 に 書 式 のフォーカス 枠 が 表 示 されます 参 考 [HTML ソース]タブ 編 集 中 に [HTML ソース]タブで タグの 確 認 をすることができます 文 字 サイズを4 段 階 拡 大 することで FONT size="+4" と 表 示 されてい ます 3 同 様 に 各 項 目 名 を3 段 階 説 明 文 を2 段 階 大 きくします +3 +2 5-15

(2) 太 字 の 設 定 1 世 界 の 名 画 に 親 しむ を 範 囲 選 択 し ツールバーの [ 太 字 ]をクリックします 太 字 を 解 除 するには 再 度 ボタンをクリックします なども 同 じ ボタンで 設 定 の ON/OFF を 切 り 替 えることができます (3) 文 字 色 の 設 定 1 学 習 のねらい を 範 囲 選 択 し ツールバーの [フォ ントの 変 更 ]をクリックしま す [フォント]ダイアログボ ックスが 表 示 されます 2 をクリックし パレット を 表 示 させ 任 意 の 色 を 選 択 します 5-16

色 指 定 の 枠 に 選 択 した 色 のカラーコードが 表 示 され ます 3 す をクリックしま 範 囲 選 択 を 解 除 して 色 を 確 認 しましょう 参 考 カラーコードについて HTML では 色 をコードで 表 します #のあとに0~9 a~fの 中 から 6 文 字 を 組 み 合 わせて 使 用 します 例 えば #ffffff は 白 色 になり ます およそ 1677 万 色 をカラーコードで 表 現 することができます 参 考 色 の 設 定 について 文 字 の 色 は 変 更 できますが あまり 多 くの 色 を 使 いすぎると 読 みづら くなるので 全 体 の 配 色 を 考 えて 適 度 な 色 にしましょう 4 同 様 にその 他 の 学 習 の~ に 同 じ 色 を 設 定 します 5-17

(4) 配 置 の 変 更 ページ 内 に 入 力 した 文 字 や 画 像 などは 初 期 の 設 定 では 左 端 に 配 置 され るので 後 から 中 央 や 右 端 に 配 置 します 世 界 の 名 画 に 親 しむ の 段 落 を 中 央 に 配 置 します 1 世 界 の 名 画 に 親 しむ の 段 落 にカーソルを 表 示 させま す 2 ツールバーの [ 中 央 揃 え]をクリックします デジタルコンテンツを 利 用 して の 段 落 も 中 央 に 配 置 しましょう 5-18

5 Web ページの 保 存 ( 名 前 を 付 けて 保 存 ) (1) [ファイル]メニューを 選 択 し [ 名 前 を 付 けて 保 存 ] をクリックします [ 名 前 を 付 けて 保 存 ]ダイアログボックスが 表 示 されます (2) [ 保 存 する 場 所 ]に マイド キュメント の 中 の HTML practice を 指 定 し [ファ イル 名 ]の 欄 に index.htm と 入 力 し をクリッ クします タイトルバーにファイル 名 が 表 示 されます index.htm [ 名 前 を 付 けて 保 存 ]が 終 了 したらページを 閉 じましょう 参 考 ファイル 名 について ファイル 名 は 記 号 や 機 種 依 存 文 字 (12 など)を 除 いた 半 角 の 英 数 字 で 指 定 します (WWWサーバーによっては 日 本 語 のファイル 名 を 正 しく 認 識 できなかったり 記 号 に 特 別 な 意 味 が 設 定 されていたりする 場 合 があります ) また トップページのファイル 名 は index.htm か index.html が 一 般 的 です 契 約 しているプロバイダによってはトップページのファイ ル 名 が 決 められている 場 合 があるので 確 認 が 必 要 です 5-19

練 習 2ページ 目 を 作 成 しましょう 1 新 規 作 成 白 紙 ページを 表 示 します [HTML の 新 規 作 成 ]を クリックします [ 標 準 モード]を 選 択 し をクリックします 2 ページタイトルの 設 定 [ 編 集 ]メニューをクリック し [ページの 属 性 ]をクリッ クします [ページタイトル]に 学 習 の 流 れ - 導 入 - と 入 力 し をクリックします 学 習 の 流 れ- 導 入 - 5-20

3 文 字 の 入 力 HTML 本 文.jtd か ら 本 文 を[コピー]& [ 貼 り 付 け]します 上 図 のように[Shift]キー+[Enter]キーを 押 し 改 段 します 枠 は 段 落 を 表 しています 各 段 落 の 先 頭 にある [ 段 落 記 号 ]は [Delete]キーで 削 除 します 4 文 字 サイズの 変 更 下 図 のように 文 字 サイズを 変 更 します +4 +3 +2 5 Web ページの 保 存 [ファイル]メニューをクリ ックし [ 名 前 を 付 けて 保 存 ] をクリックします 5-21

[ 保 存 する 場 所 ]に マイド キ ュ メ ン ト の 中 の HTMLpractice を 指 定 し [フ ァイル 名 ]の 欄 に p1.htm と p1.htm 入 力 し をクリック します 6 Web ページを 開 く トップページ index.htm を 呼 び 出 しましょう (1) ツールバーの [ 開 く] をクリックします [ 開 く]ダイアログボックスが 表 示 されます (2) [マイドキュメント]の 中 の [HTMLpractice] か ら index.htm をクリックし ます をクリックし 画 面 には index.htm と p1.htm が 開 いています [ウィンドウ] メニューで 切 り 替 えられることを 確 認 しましょう 5-22

7 水 平 線 の 挿 入 水 平 線 を 挿 入 すると 見 やすい Web ページになります ここでは index.htm に 水 平 線 を 挿 入 しましょう (1) [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます (2) 水 平 線 を 挿 入 する 位 置 をクリックし カーソルを 表 示 させます (3) [ナビメニュー]の[ 水 平 線 の 挿 入 ]をクリックします [ 水 平 線 の 挿 入 ]ダイアログボックスが 表 示 されます このダイアログ ボックスでは 水 平 線 の 太 さ や 水 平 線 の 幅 などを 設 定 できます (4) ここでは[ 水 平 線 の 太 さ] が 1 ピクセル [ 水 平 線 の 幅 ]が 100% の ま ま をクリックします 水 平 線 が 挿 入 されます 5-23

(5) 同 様 に 相 手 に 伝 えるため に 絵 図 や 資 料 を 見 せながら 話 す の 下 に 水 平 線 を 挿 入 しましょう 参 考 水 平 線 の 長 さ( 幅 )について 水 平 線 の 長 さはピクセル 単 位 ( 固 定 ) または%(ウィンドウの 幅 に 対 する 割 合 )で 指 定 できます ウィンドウの 幅 に 対 する 割 合 で 指 定 してお くと 利 用 者 の 環 境 が 異 なっても 同 じように 水 平 線 を 表 示 できます 8 画 像 の 挿 入 デジタルカメラなどで 撮 った 画 像 を 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

9 ボタンの 挿 入 図 形 に 効 果 を 加 えてボタン 状 にした 画 像 ファイルを ボタン といいます ここでは index.htm に と を 挿 入 します (1) [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます (2) 最 下 行 で[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) [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます (2) ツールバーの [ 上 書 き 保 存 ]をクリックします [ 素 材 ファイルをコピーして 保 存 ]ダイアログボックスが 表 示 されます 画 像 ファイルなどが 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

Ⅳ リンクの 設 定 1 リンクの 設 定 (ページや URL へのリンクの 設 定 ) 文 字 や 画 像 をクリックすると 別 のページやファイルが 表 示 される 仕 組 み を リンク といいます ジャンプする 起 点 を リンク 元 ジャンプする 先 を リンク 先 といいます 指 定 できるリンク 先 には 次 のようなものがあ ります 別 の Web ページ 同 じ Web ページ 内 の 別 の 場 所 別 の Web サイト HTML ファイル 以 外 のファイル 電 子 メールの 作 成 画 面 ここでは 下 図 のように 3ヶ 所 リンクを 設 定 します index.htm (1) p1.htm (2) (3) 別 の Web サイト インターネット 美 術 館 へ 5-36

(1) index.htm から p1.htm へのリンク トップページ index.htm の 表 示 するようにリンクを 設 定 します をクリックすると p1.htm を 1 [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます 2 を 選 択 し [ナビメニ ュー]の[リンクの 挿 入 ]を クリックします [リンク 作 成 ウィザード]が 表 示 されます 3 [ページや URL へのリンクを 作 成 する]が 選 択 されている ことを 確 認 して をクリックします 4 をクリックします [リンクウィザード( 文 字 列 画 像 ファイルの 設 定 )]ダイアログボッ クスは リンク 元 を 設 定 するための 画 面 です ここでは 既 に を 選 択 しているのでグレーアウトで 表 示 されています 5-37

5 リンク 先 を 指 定 するので をクリックしま す 6 [ファイルから]をクリック します [ 開 く]ダイアログボックスが 表 示 されます 7 p1.htm を 選 択 し をクリックします リンク 先 ファイル 名 が 指 定 されます 8 をクリックします [ 上 書 き 保 存 ]しましょう 5-38

参 考 ターゲットについて リンクしたファイルを どの 場 所 (ウィンドウ)に 表 示 させるかを 設 定 するものです 研 修 では ターゲットは 使 用 しません 参 考 リンクの 確 認 プレビュー でリンクが 正 しく 設 定 されているか 確 認 できます リンク 設 定 後 に 上 書 き 保 存 をしていないと 正 しい 動 作 確 認 ができない 場 合 が あるので 注 意 しましょう 1 [プレビュー]タブをクリッ クします にマウスポ インタを 合 わせると に なるのでクリックします 2 リンク 先 ページが 表 示 され ます で 前 の 画 面 に 戻 る ことができます 確 認 が 終 わったら[ページ 編 集 ]タブをクリックして おきましょう 5-39

参 考 リンクの 解 除 について リンクの 解 除 は ショートカットメニューからできます リンク 元 を 右 クリックし 表 示 されるショートカットメニューの 中 から[リンクの 解 除 ]をクリックします また ショートカットメニューの 中 から[リンクの 設 定 ]をクリックす ると リンク 先 の 変 更 もできます (2) p1.htm から index.htm へのリンク p1.htm の をクリックすると index.htm を 表 示 するように リンクを 設 定 します 1 [ウィンドウ]メニューをクリックし p1.htm に 切 り 替 えます 2 を 選 択 し [ナビメニ ュー]の[リンクの 挿 入 ]を クリックします リンク 作 成 ウィザードが 表 示 されます 5-40

3 [ページや URL へのリンクを 作 成 する]が 選 択 されている ことを 確 認 して をクリックします 4 す をクリックしま 5 リンク 先 を 指 定 するので をクリックしま す 6 [ファイルから]をクリック します [ 開 く]ダイアログボックスが 表 示 されます 7 index.htm を 選 択 し をクリックします 5-41

リンク 先 ファイル 名 が 指 定 されます 8 す をクリックしま [ 上 書 き 保 存 ]をし [プレビュー]タブに 切 り 替 えてリンクの 確 認 をしましょう その 後 [ページ 編 集 ]タブに 戻 しておきます (3) p1.htm から インターネット 美 術 館 へのリンク p1.htm の 自 分 の 好 きな 絵 を 探 そう! をクリックすると Web ペ ージ インターネット 美 術 館 を 表 示 するようにリンクを 設 定 します 1 自 分 の 好 きな 絵 を 探 そ う! を 選 択 し [ナビメニ ュー]の[リンクの 挿 入 ]を クリックします リンク 作 成 ウィザードが 表 示 されます 2 [ページや URL へのリンクを 作 成 する]が 選 択 されている ことを 確 認 して をクリックします 5-42

3 す をクリックしま 4 [リンク 先 ]の URL を 入 力 し ます http://www.nipec.niigata.niigata.jp/cec/ internetbizyutukan/index.htm 5 をクリックします 参 考 別 の Web サイトにリンクを 設 定 する 4のように リンク 先 の URL を 直 接 入 力 する 方 法 の 他 に あらかじめ リンクを 設 定 したい Web サイトをブラウザで 表 示 し の URL をブラウザより 取 得 をクリックして 設 定 する 方 法 もあります 参 考 リンクを 設 定 するときのマナー 別 の Web サイトにリンクを 設 定 するときには その Web サイトの 管 理 者 に 許 可 を 取 る 必 要 があります ただし リンクフリー と 明 記 してあ るものに 関 しては 特 に 許 可 を 取 る 必 要 はありません リンクを 設 定 した Web サイトを 表 示 させるときは 別 のウィンドウに します ターゲットで 新 しいウィンドウ を 設 定 します 5-43

リンクを 設 定 した 部 分 の 文 字 の 色 が 変 更 されます [ 上 書 き 保 存 ]をし [プレビュー]タブに 切 り 替 えてリンクの 確 認 をしましょう その 後 [ページ 編 集 ]タブに 戻 しておきます 5-44

2 リンクの 設 定 (ラベルへのリンクの 設 定 ) Web ページの 特 定 の 場 所 にジャンプさせたいときは ラベル を 作 成 し リンクを 設 定 します 1ページが 長 くなるようなときに 使 うと 効 果 的 です ラベル とは リンク 先 (リンクの 着 地 点 )です また 別 の Web ページのラベルにリンクを 設 定 することもできます ラベ ルへのリンクの 設 定 は 最 初 にラベルを 設 定 し そのあとでリンクを 設 定 し ます index.htm p1.htm ラベルの 設 定 ラベル 名 :digital ラベルの 設 定 ラベル 名 :gallery (1) (2) ここでは トップページ index.htm の -デジタルコンテンツを 利 用 し て- に ラベル digital を 設 定 して 同 じ Web ページ 内 の をクリッ クすると digital にジャンプするようにリンクを 設 定 します また p1.htm の インターネット 美 術 館 にラベル gallery を 設 定 して トップページ index.htm の 世 界 の 名 画 を 比 較 することができ 簡 単 に 利 用 できる をクリックすると gallery にジャンプするようにリン クを 設 定 します 5-45

(1) 同 一 ページ 内 のラベルへのリンク 初 めにラベルを 設 定 します 1 [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます 2 -デジタルコンテンツを 利 用 して- を 範 囲 選 択 して [ナビメニュー]の[リンク の 挿 入 ]をクリックします 3 [ラベルを 作 成 する]を 選 択 し をクリック します 4 [ラベルを 付 ける]を 選 択 し す をクリックしま 5 ラベル 入 力 欄 に digital と 入 力 します digital 6 す をクリックしま 5-46

ラベルを 設 定 した 部 分 に 点 線 が 表 示 されます 7 をクリックし [ナビ メニュー]の[リンクの 挿 入 ] をクリックします 8 [ラベルを 作 成 する]を 選 択 し をクリック します 9 [ラベルへのリンクを 作 成 す る]を 選 択 し をクリックします 5-47

10 [ラベル]の 右 にある を クリックし ラベルの 一 覧 か ら digital を 選 択 します 11 をクリックします [ 上 書 き 保 存 ]をして [プレビュー]タブで 確 認 し その 後 [ペー ジ 編 集 ]タブに 戻 しておきましょう (2) 別 ページのラベルへのリンク 初 めにラベルを 設 定 します 1 [ウィンドウ]メニューをクリックし p1.htm に 切 り 替 えます 2 インターネット 美 術 館 を 範 囲 選 択 し [ナビメニュー] の[リンクの 挿 入 ]をクリッ クします 3 [ラベルを 作 成 する]を 選 択 し をクリック します 4 [ラベルを 付 ける]を 選 択 し ます をクリックし 5-48

5 ラベル 入 力 欄 に gallery と 入 力 します gallery 6 をクリックします ラベルを 設 定 した 部 分 に 点 線 が 表 示 されます [ 上 書 き 保 存 ]しましょう 7 [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます 8 世 界 の 名 画 を 比 較 すること ができ 簡 単 に 利 用 できる を 選 択 し [ナビメニュー] の[リンクの 挿 入 ]をクリッ クします 9 [ラベルを 作 成 する]を 選 択 し をクリック します 5-49

10 [ラベルへのリンクを 作 成 す る]を 選 択 し をクリックします 11 別 のファイル 内 にあるラベ ルを 指 定 するので [ 他 のフ ァ イ ル ] の 右 に あ る す をクリックしま 12 [ファイルから]をクリック します 13 p1.htm を 選 択 し をクリックします 14 p1.htm が 指 定 されます 5-50

15 [ラベル]の 右 にある を クリックし ラベルの 一 覧 か ら gallery を 選 択 します 16 をクリックします [ 上 書 き 保 存 ]をして [プレビュー]タブで 確 認 しましょう その 後 [ページ 編 集 ]タブに 戻 しておきましょう 5-51

3 ブラウザで 確 認 ツールバーにある をクリックすると Internet Explorer が 自 動 的 に 起 動 して 現 在 開 いているページがどのように 表 示 されるかを 確 認 できます (1) ツールバーの [ Internet Explorer の 起 動 ]をクリック します (2) Internet Explorer が 起 動 し ページが 表 示 されます (3) 確 認 が 終 わったら Internet Explorer を 閉 じましょう 5-52

Ⅴ ページの 編 集 index.htm ロゴの 作 成 壁 紙 の 設 定 動 画 の 挿 入 p1.htm ロゴの 作 成 表 の 作 成 5-53

1 壁 紙 の 挿 入 ページの 背 景 に 貼 り 付 けた 画 像 ファイルを 壁 紙 といいます 壁 紙 はブ ラウザのウィンドウいっぱいにタイル 上 に 敷 き 詰 められます ホームペー ジ ビルダーにあらかじめ 用 意 されている 画 像 や 手 持 ちの 画 像 を 壁 紙 に 設 定 できます ここでは トップページ index.htm に HTMLsample フォルダの kabegami.jpg を 設 定 します (1) index.htm が 表 示 されていることを 確 認 します (2) [ナビメニュー]の[ 壁 紙 の 挿 入 ]を 選 択 し [ファイ ルから]をクリックします (3) マイ ドキュメント の 中 の HTMLsample フォルダに ある kabegami.gif を 選 択 し をクリックしま す 背 景 に 壁 紙 が 設 定 されます [ 上 書 き 保 存 ]しましょう 5-54

参 考 壁 紙 を 削 除 する 方 法 について (1) [ 編 集 ]メニューの[ 背 景 / 文 字 色 の 設 定 ]をクリックし ます [ 属 性 ]ダイアログボックス が 表 示 されます (2) [ 背 景 画 像 ]として 指 定 さ れているファイル 名 を [delete]キーなどで 削 除 し ます 削 除 (3) をクリックしま す 参 考 ページの 背 景 について ページの 背 景 は 壁 紙 以 外 に 色 を 設 定 することで 見 栄 えをよくす ることができます 背 景 色 の 設 定 方 法 は 以 下 のとおりです (1) [ 編 集 ]メニューの[ 背 景 / 文 字 色 の 設 定 ]をクリックし ます (2) [ 背 景 ]の 右 にある を クリックし パレットから 色 を 選 択 します 背 景 色 と 文 字 色 のコント ラストは はっきりと 見 や すいものにしましょう 5-55

なお 同 じ 画 面 にある をクリックすると 背 景 色 と 文 字 色 の 組 み 合 わせを 選 択 することができます 2 ロゴの 作 成 文 字 に 効 果 を 加 えて 画 像 ファイルにしたものを ロゴ といいます 強 調 したい 文 字 をロゴにすると 見 栄 えがします ロゴを 作 成 すると ロゴの 周 囲 と 背 景 がなじむように 自 動 的 に 処 理 されま す ロゴを 作 成 した 後 に 壁 紙 や 背 景 を 設 定 すると 自 動 調 整 されません 壁 紙 や 背 景 はロゴの 作 成 前 に 設 定 しておきましょう ここでは 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 にします 3 動 画 ファイルの 挿 入 ここでは index.htm に HTMLsample フォルダの millet.mov を 挿 入 します (1) [ウィンドウ]メニューをクリックし index.htm に 切 り 替 えます (2) 動 画 を 挿 入 する 場 所 にカ ーソルを 表 示 します 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) [プレビュー]タブをクリ ックします 動 画 の 再 生 ウィンドウにあ る をクリックすると 再 生 が 始 まります 確 認 が 終 わったら[ページ 編 集 ]シートに 切 り 替 え [ 上 書 き 保 存 ]し ましょう 4 表 の 挿 入 項 目 ごとに 数 値 データを 表 示 したり レイアウトを 整 えたりするときに 表 を 使 用 すると 効 果 的 です 表 の 各 部 の 名 称 は 次 のとおりです セル 行 列 5-62

ここでは p1.htm に2 行 2 列 の 表 を 作 成 し 画 像 と 説 明 文 をレイアウ トします < 完 成 例 > (1) [ウィンドウ]メニューをクリックし p1.htm に 切 り 替 えます (2) 表 を 挿 入 する 位 置 にカー ソルを 表 示 します (3) [ナビメニュー]の[ 表 の 挿 入 ]をクリックします 5-63

[ 表 の 挿 入 ]ダイアログボックスが 表 示 されます (4) 行 数 列 数 ともに 2 で あることを 確 認 し をクリックします 枠 線 を 表 示 したくない 場 合 は 表 の 枠 を 表 示 する のチェックを 外 します 表 が 挿 入 されます 挿 入 した 表 のセルに 画 像 と 文 章 を 移 動 します (5) 落 ち 穂 拾 い の 画 像 を 選 択 します 画 像 の 中 で 右 クリ ックをし 表 示 されたショー トカットメニューから[ 切 り 取 り]をクリックします 5-64

(6) 表の左上のセルを選択し ま す 選 択 し た セ ル の 中 で 右 ク リ ッ ク を し 表 示 さ れ た シ ョートカットメニューから 貼 り 付 け を ク リ ッ ク し ま す セルの中に画像が移動し ます (7) 文 字 列 写 実 主 義 ミ レ ー 落 穂 拾 い を 選 択 し ま す 選 択 し た 中 で 右 ク リ ッ ク を し 表 示 さ れ た シ ョ ー ト カ ットメニューから 切り取 り をクリックします (8) 表の右上のセルを選択し ま す 選 択 し た セ ル の 中 で 右 ク リ ッ ク を し 表 示 さ れ た シ ョートカットメニューから 貼 り 付 け を ク リ ッ ク し ま す 5-65

セルの 中 に 文 字 列 が 移 動 し ます (9) 同 様 の 操 作 で 残 りの 画 像 と 文 字 列 を 表 のそれぞれのセ ルに 移 動 します 画 像 の 大 きさを 調 整 し [ 上 書 き 保 存 ]しましょう 最 後 に[Internet Explorer の 起 動 ]ボタン をクリックしてブ ラウザ 上 での 表 示 を 確 認 しましょう 5-66