第 回 アビリンピック 京 都 大 会 ホームページ 部 門 練 習 問 題 (1) 仕 様 1 ホームページの 内 容 府 立 京 都 高 等 技 術 専 門 校 のホームページを 作 成 する 2 ページ 構 成 とファイル <ファイル 名 > index.html guid.html course.html mystyle.css ie.css 以 上 のファイルと 素 材 はホームページよりダウンロードして 取 得 すること また 取 得 した HTML ファイルには3から5の 定 義 は 既 に 記 述 されており スタイルシー トファイルにおいても7で 提 示 されているものが 記 述 されている 3 すべてのページに 名 前 をタイトルとしてタイトルバーに 表 示 する 4 HTML のバージョン 情 報 HTML 言 語 は HTML4.01 Transitional に 基 づくタグを 使 用 し スタイルシートは W3C 勧 告 のスタイルシート 第 2 水 準 (CSS2) に 基 づき 以 下 のバージョン 情 報 が 記 述 されている <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > 5 ヘッダ 情 報 各 ページには 以 下 のヘッダ 情 報 が 記 述 されている ( ie.css は 提 供 ファイル) 使 用 言 語 <meta http-equiv= Content-Language content= ja > 文 字 コード <meta http-equiv= Content-Type content= text/html;charset=shift_jis > 著 者 <meta name= author content= ( 各 自 の 名 前 ) > I E 互 換 <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css"> <![endif]--> body{ } ie.css の 内 容 text-align:center;.container{ text-align:left; } 1
6 レイアウト 構 成 以 下 のようなレイアウト 構 成 を 行 う container ブロック 上 に header ブロック center ブロック footer ブロックを 配 置 する 7 スタイルシート 以 下 に 提 供 したスタイルシート(mystyle.css)での 定 義 内 容 を 示 す < 全 ページに 関 するスタイルシート 定 義 > 全 クラス(*) マージン 0 パディング 0 クラス container 幅 マージン 760px 0 auto クラス header 幅 高 さ 背 景 イメージ 760px 90px img/header_bar.gif クラス center 幅 760px 2
クラス footertext 幅 高 さ 背 景 イメージ 回 り 込 み 760px 45px img/footer_bar.gif 解 除 リンクテキストのスタイル a:link 文 字 色 #000000 リンクテキストのスタイル a:visited 文 字 色 #000000 クラス menulist (メニューリストのセルに 関 する 定 義 ) 幅 190px 文 字 列 の 配 置 ( 文 字 揃 え) 中 央 背 景 色 #6699ff クラス guid_menu (ガイドメニューに 関 する 定 義 ) 文 字 色 #6699ff マージン( 上 ) 5px クラス footertext (footer ブロックのテキストに 関 する 定 義 ) 文 字 列 の 配 置 ( 文 字 揃 え) 右 パディング( 上 ) 15px 3
問 題 1 問 題 1 index.html の 作 成 <index.html ページ> 提 供 ファイル index.html で 内 部 定 義 されているスタイルシートの 仕 様 一 覧 を 以 下 に 示 す クラス line ( 水 平 線 に 関 する 定 義 ) 高 さ 3px 背 景 色 #282ddc マージン( 上 ) 15px クラス toplist マージン( 左 ) 20px 20px クラス topicsitem ボーダー( 左 ) パディング( 左 ) マージン( 左 ) solid #ff6666 7px クラス setsumeiitem ボーダー( 左 ) パディング( 左 ) マージン( 左 ) solid #33cccc 7px クラス examitem ボーダー( 左 ) パディング( 左 ) マージン( 左 ) solid #3333cc 7px 4
container ブロック header ブロック 問 題 1 center ブロック メニュー TOPICS ブロック 入 校 説 明 会 ブロック 入 校 選 考 ブロック footer ブロック < 設 問 1> 仕 様 6で 指 定 したレイアウト 構 成 (container ブロック header ブロック center ブロック foote ブロック)を 作 成 しなさい 各 ブロックは div タグを 用 いて 指 定 クラスを 使 用 しなさい 指 定 クラスは 以 下 の 通 りである container ブロック: クラス container header ブロック: クラス header center ブロック: クラス center footer ブロック: クラス footer 1 header ブロックについて < 設 問 2> 画 像 (title.jpg)を 配 置 する 2 center ブロックについて < 設 問 3> 画 像 (top.jpg)を 配 置 する < 設 問 4> メニューを 作 成 する table タグを 用 いて スタイルシート menulist クラスを 使 用 すること メニュー 項 目 は 以 下 のようにする T O P : リンクは 指 定 しない 学 校 案 内 : guid.html へリンク 指 定 コ ー ス 案 内 : course.html へリンク 指 定 お 問 い 合 わせ : リンクは 指 定 しない < 設 問 5> TOPICS 入 校 説 明 会 入 校 選 考 ブロックを 作 成 する div タグを 用 いて スタイルシート toplist クラスを 使 用 すること < 設 問 6> TOPICS ブロック 内 を 作 成 する 水 平 線 を 配 置 する スタイルシート line クラスを 使 用 すること イメージ 画 像 (line1.bmp)を 配 置 する 各 リスト 内 容 を 表 示 する p タグを 用 いて スタイルシート topicsitem クラスを 使 用 すること < 設 問 7> 入 校 説 明 会 ブロック 内 を 作 成 する 水 平 線 を 配 置 する スタイルシート line クラスを 使 用 すること イメージ 画 像 (line2.bmp)を 配 置 する 各 リスト 内 容 を 表 示 する p タグを 用 いて スタイルシート setsumeiitem クラスを 使 用 すること 5
問 題 1 < 設 問 8> 入 校 選 考 ブロック 内 を 作 成 する 水 平 線 を 配 置 する スタイルシート line クラスを 使 用 すること イメージ 画 像 (line3.bmp)を 配 置 する 各 リスト 内 容 を 表 示 する p タグを 用 いて スタイルシート examitem クラスを 使 用 すること 3 footer ブロックについて < 設 問 9> テキスト Copyright Kyoto Technical Institute を 表 示 する ただし p タグを 用 いて スタイルシート footertext クラスを 使 用 する index.html メニュー リスト 内 容 水 平 線 リスト 内 容 水 平 線 リスト 内 容 水 平 線 6
問 題 2 問 題 2 guid.html の 作 成 <guid.html ページ> 提 供 ファイル guid.html で 内 部 定 義 されているスタイルシートの 仕 様 一 覧 を 以 下 に 示 す クラス info ( 学 校 概 要 ブロックに 関 する 定 義 ) マージン 0 h1 タグ 文 字 サイズ 130% 背 景 色 #ffddbb マージン( 上 ) 5px h2 タグ 文 字 サイズ 115% マージン( 上 ) 15px マージン( 左 ) 5px ボーダー( 下 ) 2px solid #ff6666 p タグ マージン( 左 ) 20px 5px 7
container ブロック header ブロック 問 題 2 center ブロック ガイドメニュー メニュー 学 校 概 要 ブロック footer ブロック 問 題 1 で 作 成 したレイアウト 構 成 を 基 に 以 下 の 仕 様 に 基 づいてページを 作 成 しなさい 1 header ブロックについて < 設 問 1> 画 像 (title.jpg)を 配 置 する ( 問 題 1 と 同 様 ) 2 center ブロックについて < 設 問 2> ガイドメニューを 作 成 する p タグを 用 いて スタイルシート guid_menu クラスを 使 用 すること メニューのリンク 先 は 以 下 の 通 りである 京 都 高 等 技 術 専 門 校 : index.html へリンクさせる 学 校 案 内 : guid.html へリンクさせる < 設 問 3> メニューを 配 置 する ( 問 題 1 と 同 様 ) < 設 問 4> 学 校 概 要 ブロックを 作 成 する div タグを 用 いて スタイルシート info クラスを 使 用 すること 1) h1 タグを 用 いて 見 出 し1を 記 述 する 2) h2 タグを 用 いて 見 出 し2を 記 述 する 3) 各 説 明 文 は p タグを 用 いて 記 述 する 3 footer ブロックについて < 設 問 5> テキスト Copyright Kyoto Technical Institute を 表 示 する ( 問 題 1 と 同 様 ) 8
guid.html 問 題 2 ガイドメニュー 見 出 し1 見 出 し1 見 出 し2 9
問 題 3 問 題 3 course.html の 作 成 <course.html ページ> 提 供 ファイル course.html で 内 部 定 義 されているスタイルシートの 仕 様 一 覧 を 以 下 に 示 す クラス course_guide ( 訓 練 科 紹 介 ブロックに 関 する 定 義 ) 文 字 列 の 配 置 ( 文 字 揃 え) center マージン 0 auto tbody タグ 文 字 列 の 配 置 ( 文 字 揃 え) center クラス g_table ( 訓 練 科 紹 介 テーブルに 関 する 定 義 ) ボーダーの 分 離 結 合 collapse マージン( 上 ) caption タグ キャプション 表 示 位 置 top 文 字 サイズ 150% th タグ 背 景 色 #ffcc33 ボーダー 1px solid #000000 パディング 5px クラス c_col ( 訓 練 紹 介 テーブルのセルに 関 する 定 義 ) 高 さ 50px ボーダー 1px solid #000000 パディング 5px 10
container ブロック header ブロック 問 題 3 center ブロック ガイドメニュー メニュー 訓 練 科 紹 介 ブロック 各 科 紹 介 表 footer ブロック 問 題 1 で 作 成 したレイアウト 構 成 を 基 に 以 下 の 仕 様 に 基 づいてページを 作 成 しなさい 1 header ブロックについて < 設 問 1> 画 像 (title.jpg)を 配 置 する ( 問 題 1 と 同 様 ) 2 center ブロックについて < 設 問 2> ガイドメニューを 作 成 する ( 問 題 2 と 同 様 ) メニューのリンク 先 は 以 下 の 通 りである 京 都 高 等 技 術 専 門 校 : index.html へリンクさせる コース 案 内 : course.html へリンクさせる < 設 問 3> メニューを 配 置 する ( 問 題 1 と 同 様 ) < 設 問 4> 訓 練 科 紹 介 ブロックを 作 成 する div タグを 使 用 して スタイルシート course_guide クラスを 使 用 すること < 設 問 5> 訓 練 科 紹 介 ブロック 内 に 各 科 紹 介 表 を 配 置 する table タグ tbody タグを 用 いて 各 科 紹 介 表 を 作 成 し 必 要 に 応 じてセル 結 合 を 行 うこと ただし スタイルシート g_table クラスを 使 用 し セル 間 隔 を 0 とする 1) 表 の 見 出 しは caption タグを 用 いる 2) 見 出 し 列 ( 表 の 最 上 位 の 行 )は th タグを 使 用 する 3) 見 出 し 列 以 外 の 各 セルは スタイルシート c_col クラスを 使 用 する 3 footer ブロックについて < 設 問 6> テキスト Copyright Kyoto Technical Institute を 表 示 する ( 問 題 1 と 同 様 ) 11
course.html 問 題 3 12
問 題 4 問 題 4 index.html のレイアウトの 変 更 container ブロック header ブロック center ブロック menu ブロック main ブロック メニュー TOPICS ブロック 入 校 説 明 会 ブロック 入 校 選 考 ブロック footer ブロック 提 供 ファイル index.html mystyle.css をそれぞれ 追 加 変 更 を 行 い ファイル 名 を index2.html スタイルシート 名 を mystyle2.css として 保 存 すること またスタイルシートの 定 義 は 必 要 に 応 じて 変 更 追 加 をしなさい 1 center ブロックについて < 設 問 1> menu ブロックと main ブロックを 作 成 する 上 図 のようなレイアウト 構 成 を 行 う 2 manu ブロック main ブロックについて menu ブロックの 幅 は 220px main ブロックの 幅 は 520px とする < 設 問 2> menu ブロックにメニューを 作 成 する 下 図 のようなメニューを 作 成 しなさい 背 景 色 は #282ddc を 使 用 する 13
問 題 5 問 題 5 index.html のサブメニューの 追 加 container ブロック header ブロック サブメニュー center ブロック menu ブロック main ブロック メニュー TOPICS ブロック 入 校 説 明 会 ブロック 入 校 選 考 ブロック footer ブロック 提 供 ファイル index2.html mystyle2.css をそれぞれ 追 加 変 更 を 行 い ファイル 名 を index3.html スタイルシート 名 を mystyle3.css として 保 存 すること またスタイルシートの 定 義 は 必 要 に 応 じて 変 更 追 加 をしなさい 1 header ブロックについて < 設 問 1> サブメニューを 配 置 する 画 像 title.jpg の 右 側 に 下 図 のようなサブメニューを 追 加 する 背 景 色 は #6699ff とする また リンクの 指 定 は 行 わない 14