補 充 資 料 8 Webページ 作 成 基 礎 (ホームページビルダー 編 ) いわてEDネットに 接 続 しているすべての 県 立 学 校 での 学 校 Webページの 公 開 が 平 成 15 年 度 まで に 完 了 し 開 かれた 学 校 づくりの 一 環 として 小 中 学 校 や 幼 稚 園 などでも 積 極 的 にWebページの 公 開 が 進 んでいる これらのWebページの 作 成 にあたってはサイト 管 理 者 のみがあたるのではなく すべての 教 職 員 が 自 らの 担 当 する 部 署 や 学 校 活 動 の 情 報 をもとにWebページを 作 成 し 公 開 できるよ うになれば より 効 果 的 に 学 校 の 様 子 を 公 開 し 情 報 発 信 ができるのではないかと 考 え オンライ ン 研 修 教 材 として 開 発 した Webページの 作 成 ソフトとしては 初 心 者 から 上 級 者 まで 幅 広 く 利 用 されているホームページビ ルダーを 取 り 上 げた 教 材 の 構 成 としては 単 にソフトの 操 作 方 法 だけではなく 学 校 のWebペー ジを 作 成 するにあたって 知 っておきたい 基 本 的 な 事 項 や 見 やすいページデザインの 考 え 方 など 基 礎 知 識 を 理 解 した 上 で 作 成 演 習 に 入 るように 組 み 立 てた さらに 学 習 画 面 とソフトの 操 作 画 面 を 合 わせて 表 示 できるように 640 480の 大 きさに 縮 小 しても 表 示 が 乱 れぬよう 配 慮 した また 1 操 作 1 画 面 となるように 構 成 し 画 面 スクロール を 最 小 限 にとどめるなど 学 習 者 の 利 便 性 を 考 慮 して 開 発 した 補 表 8 Webページ 作 成 基 礎 (ホームページビルダー 編 )の 学 習 項 目 代 表 学 習 項 目 学 習 項 目 (ア) Webページ 制 作 の 企 画 1 Webページ 制 作 の 流 れ 補 図 100 2 HTML 文 書 とブラウザ 補 図 101 3 作 成 するページ 補 図 102 4 確 認 テスト1 補 図 103 (イ) Webデザイン 1 デザインの 流 れ 補 図 104 2 トップページの 分 類 補 図 105 3 フォントの 使 い 方 補 図 106 4 ページサイズの 決 定 補 図 107 5 ナビゲーションスタイル 補 図 108 6 メニュー 構 成 補 図 109 7 アクセシビリティ 補 図 110 8 確 認 テスト2 補 図 111 (ウ) 素 材 の 準 備 1 素 材 の 種 類 補 図 112 2 画 像 ファイル 補 図 113 3 確 認 テスト3 補 図 114 (エ) Webページ 作 成 ソフトを 1 Webページ 作 成 ソフトの 利 用 補 図 115 利 用 したページ 作 成 2 Webページの 作 成 補 図 116 3 トップページの 作 成 ページタイトルと 背 景 画 像 の 設 定 補 図 117 タイトルロゴの 作 成 補 図 118 ページの 保 存 補 図 119 写 真 の 配 置 補 図 120 写 真 の 加 工 補 図 121 メニューロゴの 作 成 補 図 122 メールソフトへのリンクの 設 定 補 図 123 連 絡 先 と 著 作 権 表 示 補 図 124 4 リンク 先 ページの 作 成 補 図 125 5 トップページのリンクの 設 定 補 図 126 6 ブラウザでページを 表 示 する 補 図 127 (ア) Webページ 制 作 の 企 画 ここでは 学 校 Webページの 作 成 手 順 を 示 し 各 段 階 での 考 慮 すべき 事 項 や 作 業 内 容 を 学 習 する 1 Webページ 制 作 の 流 れ 最 初 に 学 校 Webページを 作 成 するにあたっての 手 順 をおって 完 成 までの 作 業 の 流 れを 確 認 するとともに 基 本 的 な 知 識 の 習 得 ができるようにした 特 にも 学 校 という 公 的 機 関 の 情 報 の 公 開 を 目 的 としたWebページの 作 成 にあたっては 規 定 の 整 備 や 運 用 の 在 り 方 を 定 めること 魅 力 ある 効 果 的 な 内 容 となるための 表 現 方 法 を 理 解 することが 大 切 であることを 学 習 者 が 最 初 に 捉 え られるように 配 慮 した - 補 充 63 -
補 図 100 Webページ 制 作 の 流 れ 2 HTML 文 書 とブラウザ 3 作 成 するページ Webページの 作 成 に 用 いるHTMLの これから 作 成 するWebページの 内 容 を 示 した 紹 介 と そのしくみを 簡 単 に 解 説 する リンク 機 能 など 基 本 的 な 内 容 を 含 んでいる 補 図 101 HTML 文 書 とブラウザ 補 図 102 作 成 するページ - 補 充 64 -
4 確 認 テスト1 代 表 学 習 項 目 の 最 後 に 確 認 テストをおこなう 構 成 とした 学 習 した 内 容 を 選 択 式 記 述 式 に より 解 答 する 時 間 は 無 制 限 とし じっくりと 考 えて 答 えることができる 記 述 式 の 解 答 につい ては 複 数 の 解 答 を 正 解 とできるように 設 定 することができる ここでは Webページに 関 する 基 本 的 な 用 語 等 について 理 解 を 深 めるために 確 認 テスト1をおこなう 問 題 2 いわて 教 育 情 報 ネットワーク では 学 校 用 Webページ を 公 開 する 際 の 指 針 を 公 開 しています この 名 称 は いわて 教 育 情 報 ネットワークセキュリティー です にあてはまる 適 語 をカタカナで 答 え てください 正 解 は ポリシー であるが ポリシィ でも 正 解 とす ることができる 補 図 103 確 認 テスト1 (イ) Webデザイン 学 校 Web 作 成 の 概 要 を 理 解 したうえで 次 に より 効 果 的 に 情 報 を 伝 えるためにWebページの 構 成 やデザインを 考 えていく 研 修 内 容 とした ここでは 基 本 的 なWebページを 作 成 するが それにとら われずに 工 夫 した 実 際 の 各 学 校 のWebページを 作 成 することができるように 補 図 5 の 手 順 に 従 い ここでデザインの 知 識 を 学 習 する 1 デザインの 流 れ Webデザインの 五 つのポイントを 最 初 に 示 す 補 図 104 デザインの 流 れ 2 トップページの 分 類 トップページのデザインの 代 表 的 なものを 実 際 の 学 校 Webを 紹 介 することにより 視 覚 的 に 理 解 しやすい 構 成 とした 各 トップページのアドレスを 付 記 することにより Webページにアク セスして 内 容 を 確 認 することもできる - 補 充 65 -
補 図 105 トップページの 分 類 3 フォントの 使 い 方 4 ページサイズの 決 定 Webページでのフォントは 見 やすさから 閲 覧 する 側 の 表 示 サイズによって 画 面 の ゴシック 体 を 使 用 する また 特 殊 なフォン 表 示 が 変 わることがあることを 理 解 させ トを 使 用 しても 閲 覧 する 側 の 環 境 によって 表 それぞれの 画 面 表 示 に 対 応 できるWebペー 示 されないことも 解 説 する ジを 作 成 する 必 要 があることを 理 解 させる 補 図 106 フォントの 使 い 方 補 図 107 ページサイズの 決 定 - 補 充 66 -
5 ナビゲーションスタイル ナビゲーションスタイル とは リンクメニューの 配 置 や 画 面 構 成 のことをいう 操 作 性 を 考 慮 してWebページを 作 成 するために ここで おもなWebページのレイアウトについて 紹 介 し 理 解 させる 補 図 108 ナビゲーションスタイル 6 メニュー 構 成 県 内 の 学 校 Webページに 実 際 に 掲 載 されているメニュー 項 目 の 内 容 と その 割 合 を 掲 載 が 多 い 順 に 示 し 自 校 のWebページに 掲 載 すべき 内 容 を 決 定 するための 参 考 にすることができるよう 一 覧 に してまとめた 補 図 109 メニュー 構 成 - 補 充 67 -
7 アクセシビリティ 学 校 Webページは 公 的 機 関 の 情 報 公 開 の 手 段 のひとつであるから 年 齢 や 身 体 条 件 接 続 環 境 などが 異 なる 多 くのユーザーがWebサイトを 利 用 しているというアクセシビリティを 十 分 に 配 慮 し た 設 計 をしなければならない アクセシビリティ とは 環 境 設 備 機 器 ソフトウェア サー ビス 等 を 障 害 者 高 齢 者 等 さまざまな 人 々が 利 用 しやすくしていこうという 思 想 及 び 利 用 しやす さの 度 合 いを 指 す 自 校 のWebページを 作 成 するにあたりアクセシビリティを 確 認 するための 方 法 をここで 紹 介 し 理 解 させる 補 図 110 アクセシビリティ 8 確 認 テスト2 Webデザインについての 留 意 点 や 用 語 の 理 解 の 定 着 を 補 図 るため 確 認 テスト2を 行 う 間 違 い やわからなかったところは 前 のページに 戻 って 復 習 する 確 認 テストには 図 表 や 写 真 等 も 挿 入 して 表 示 出 題 することができる 補 図 111 確 認 テスト2 - 補 充 68 -
(ウ) 素 材 の 準 備 魅 力 あるWebページにするためには 写 真 や 補 図 音 声 や 音 楽 などのマルチメディア 素 材 を 効 果 的 に 利 用 することが 大 切 である そのためには 素 材 となるデータのファイル 形 式 やファイルサイ ズなどを 充 分 に 理 解 することが 必 要 であると 考 え ここで 基 本 的 な 知 識 を 研 修 する 構 成 とした 1 素 材 の 種 類 2 画 像 ファイル Webページの 情 報 の 多 くはイラストや 写 Webページの 部 品 として 構 成 される 画 像 ファ 真 などの 素 材 で 構 成 され それらはWebペ イルの 種 類 を 理 解 させ Webページの 作 成 の 前 ージのHTMLファイルとは 別 の 外 部 ファイ にあらかじめ 作 成 しておくことを 理 解 させる ルとして 構 成 されていることを 理 解 させる 補 図 112 素 材 の 種 類 補 図 113 画 像 ファイル 3 確 認 テスト3 ここで 学 習 した 素 材 ファイルの 種 類 とその 特 徴 について 理 解 の 定 着 をはかるために 確 認 テス ト3を 実 施 する 補 図 114 確 認 テスト3 (エ) Webページ 作 成 ソフトを 利 用 したページ 作 成 基 本 的 な 知 識 を 学 習 したうえで 実 際 にWebぺーじ 作 成 ソフトの 操 作 とWebページの 作 成 をおこな う Webページ 作 成 ソフトは IBMホームページビルダー8 を 用 い ソフトの 設 定 を かんたん 編 集 スタイルとして 解 説 している 操 作 画 面 の 表 示 や 各 機 能 について 解 説 し 理 解 させる - 補 充 69 -
1 Webページ 作 成 ソフトの 利 用 補 図 115 Webページ 作 成 ソフトの 利 用 2 Webページの 作 成 Webページ 作 成 の 流 れを 理 解 しスムーズに 研 修 を 進 めるために これから 作 成 するWebページ(ト ップページとリンク 先 ページ)の 構 成 内 容 と 各 ページの 関 連 (リンク)について 最 初 に 説 明 画 面 を 表 示 する - 補 充 70 -
補 図 116 Webページの 作 成 3 トップページの 作 成 ページの 作 成 をとおして 背 景 やロゴ 写 真 や 表 の 挿 入 リンクの 設 定 等 Webページの 基 本 的 な 設 定 を 研 修 できるように 操 作 画 面 を 追 いながら1 段 階 ずつ 操 作 できるように 配 慮 した ページタイトルと 背 景 画 像 の 設 定 - 補 充 71 -
補 図 117 ページタイトルと 背 景 画 像 の 設 定 タイトルロゴの 作 成 - 補 充 72 -
補 図 118 タイトルロゴの 作 成 ページの 保 存 補 図 119 ページの 保 存 写 真 の 配 置 - 補 充 73 -
補 図 120 写 真 の 配 置 写 真 の 加 工 補 図 121 写 真 の 加 工 メニューロゴの 作 成 - 補 充 74 -
補 図 122 メニューの 作 成 メールソフトへのリンクの 設 定 - 補 充 75 -
補 図 123 メールソフトへのリンクの 作 成 連 絡 先 と 著 作 権 表 示 補 図 124 連 絡 先 と 著 作 権 表 示 4 リンク 先 ページの 作 成 Webページの 基 本 的 なしくみであるハイパーリンクの 設 定 に 伴 い リンク 先 ページを 作 成 する トップページの 作 成 で 学 習 した ロゴや 表 画 像 の 挿 入 機 能 を 使 って 作 成 する あえて 操 作 画 面 を 省 略 し わからないときは 前 のページに 戻 り 復 習 するような 設 定 とした - 補 充 76 -
補 図 125 リンク 先 ページの 作 成 5 トップページのリンクの 設 定 Webページの 作 成 の 最 後 に トップページから 年 間 行 事 のページにハイパーリンクを 設 定 す る 補 図 126 トップページのリンクの 設 定 6 ブラウザでページを 表 示 する 作 成 したWebページを 研 修 者 がブラウザで 表 示 させ ハイパーリンクの 動 作 確 認 を 行 わせる 補 図 127 ブラウザでページを 表 示 する - 補 充 77 -