ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の 試 験 実 施 方 法 は 異 なる 場 合 があります 各 設 問 では 課 題 のポイントを 枠 内 に 表 記 しています < 留 意 事 項 > 本 練 習 問 題 では Microsoft 社 インターネットエクスプローラ6(InternetExplorer6) 以 降 および Mozilla Firefox2.0 以 降 を 指 定 ブラウザとしています また 本 練 習 問 題 ではハイパテキストタグ 付 け 言 語 (HTML)については JIS X 4156:2000 (ISO/IEC15445:2000) および W3C(ワールドワイドウェブコンソーシアム)HTML4.01とし 拡 張 可 能 なハイパテキストマーク 付 け 言 語 (XHTML)はW3C XHTML 1.0 以 降 とします 段 階 スタイルシート (CSS)については JIS X4168:2004 および W3C CSS level1 以 降 とします 問 題 文 の 中 では(X)HTMLファイルとある 場 合 はHTMLとXHTMLどちらを 選 んでもかまいません また HTML XHTMLと 明 記 し 記 述 している 場 合 はそれに 従 ってください 練 習 問 題 は 最 初 に 配 布 素 材 のdataをデスクトップ 上 にコピーして 作 業 を 行 ってください また 作 成 した 課 題 はデスクトップにwdというフォルダを 作 成 し 課 題 の 指 示 に 従 ってデータを 保 存 してください
練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1という 名 前 で フォルダを 作 成 し 保 存 しなさい HTMLソースの 記 述 に 誤 りがあり 画 像 ファイルが 表 示 されない 状 態 になっている <body> <h1> 横 浜 の 最 新 情 報 </h1> <h2> 春 の 横 浜 お 勧 め 観 光 スポット</h2> <img src="img/img001.jpg" alt=" 時 計 台 の 画 像 " class= watch > 課 題 のポイント ソースファイルから 誤 りのある 部 分 を 見 つけ 出 し 指 示 通 りのページを 作 成 する ファイル 管 理 パス 及 びディレクト 管 理 が 行 えるか 2
練 習 問 題 2. 下 記 の 文 章 に 従 い 作 業 を 行 いなさい dataフォルダのq2フォルダ 内 のindex.htmlのh2 要 素 の 下 部 にある3つのテキストから 各 ページへのリンクが 正 常 に 行 われるようにしなさい その 際 HOMEはindex.htmlに ニュースはnews.htmlに 交 通 案 内 はaccess.htmlに それぞれリンクを 設 定 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダにt2という 名 前 で フォルダを 作 成 し 保 存 しなさい <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>q2</title> <link href="sample.css" rel="stylesheet" type="text/css"> </head> <body> <h1> 横 浜 の 最 新 情 報 </h1> <h2> 春 の 横 浜 お 勧 め 観 光 スポット</h2> <p>home ニュース 交 通 案 内 </p> <img src="images/clock_tower.jpg" alt=" 時 計 台 の 画 像 " class= watch"> <p>4 月 横 浜 の 春 には 恒 例 になった 大 道 芸 イベントが 開 催 されます </p> <p> 野 毛 地 区 伊 勢 佐 木 町 馬 車 道 みなとみらい 地 区 では 様 々な 大 道 芸 人 達 の 妙 技 を 見 ることができます </p> </body> </html> 課 題 のポイント ウェブサイトの 基 本 であるハイパーリンクの 設 定 が 正 しく 行 え かつパス 等 の 設 定 が 行 えるか ウェブサイトのナビゲーションに 関 わるリンク 設 定 を 指 示 に 従 い 適 切 に 記 述 する 3
練 習 問 題 3. 下 記 の 文 章 に 従 い 作 業 を 行 いなさい dataフォルダのq3フォルダ 内 のindex.htmlファイルの<div id= navi ></div> 内 の ナビゲーションを 削 除 して imagesフォルダ 内 の 最 も 適 切 と 思 われる 画 像 を 用 い 画 像 ボタンによるナビゲーションエリアを 作 成 しなさい 修 正 したindex.htmlファイ ルなどは デスクトップのwdフォルダ 内 にt3という 名 前 でフォルダを 作 成 し 保 存 しなさい 課 題 のポイント ウェブサイトのパーツとなる 複 数 のデジタルデータ( 画 像 )から 適 切 なファイルフォーマット サイズの 素 材 を 選 択 し 仕 様 にもとづいて(X)HTMLファイルを 修 正 しナビゲーションエリアを 作 成 する 適 切 な 画 像 ファイルの 選 択 とナビゲーションに 関 わる(X)HTMLの 記 述 について 4
練 習 問 題 4. 下 記 の 文 章 に 従 い 作 業 を 行 いなさい dataフォルダのq4フォルダ 内 のindex.htmlのbody 要 素 にCSSを 使 用 して 下 記 の 条 件 の ように 背 景 画 像 を 適 用 しなさい 左 側 が 暗 い 色 右 側 が 明 るい 色 のグラデーションになるものを 使 用 する ページの 最 上 部 に10pxのグラデーションが 表 示 されるようにする グラデーションは 左 から 右 へ 一 回 だけ 設 定 する 修 正 したindex.htmlなどのファイルは デスクトップのwdフォルダ 内 にt4という 名 前 でフォルダを 作 成 し 保 存 しなさい bg1 bg3 bg2 bg4 課 題 のポイント ウェブサイトのパーツを 組 み 合 わせ 規 定 の 仕 様 にあわせてレイアウトしウェブサイトを 作 成 する 5
練 習 問 題 5. 下 記 の 文 章 に 従 い 作 業 を 行 いなさい dataフォルダのq5フォルダ 内 のsitemap.pdfに 従 いフォルダを 作 成 し ファイル 等 を 移 動 してディレクトリ 構 造 を 完 成 させ リンクと 画 像 表 示 が 正 常 にブラウジングされ るようにしなさい デスクトップのwdフォルダ 内 にt5という 名 前 でフォルダを 作 成 し ディレクトリ 構 成 に 留 意 してソースファイル 等 を 保 存 しなさい 配 布 するサイトマップ 図 課 題 のポイント 適 切 なソースファイルの 構 造 を(x)HTMLファイルソースとサイトマップのディレクトリより 判 断 し ソースファイルの 管 理 をブラウジングにより 行 う 適 切 なソースファイルの 作 成 適 切 なファイル 管 理 ウェブサイトのソースファイルが 適 切 なディレクトリに 保 存 されており かつ(X)HTMLの 記 述 どおりにファイルのパスが 管 理 されているか 6
練 習 問 題 6. 下 記 の 文 章 に 従 い 作 業 を 行 いなさい dataフォルダのq6フォルダ 内 のsample.cssのファイルを 編 集 して 文 字 に 関 連 する 背 景 の 色 を#FFFFFF 文 字 を#000000に 変 更 しなさい 指 定 以 外 の 要 素 は 特 に 変 更 する 必 要 はない 修 正 したindex.htmlなどのファイルは デスクトップのwdフォルダ 内 にt6という 名 前 でフォルダを 作 成 し 保 存 しなさい 課 題 のポイント テキストおよび 背 景 に 関 わる 色 彩 の 設 定 をCSSプロパティの 値 の 変 更 によりおこなう ウェブサイトを 変 更 したデータにあわせて 正 しく 更 新 を 行 う 正 しくHTML XHTML CSSのコーディング 作 業 がなされているか 7
練 習 問 題 1. 正 答 例 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>q1</title> <link href="sample.css" rel="stylesheet" type="text/css"> </head> <body> <h1> 横 浜 の 最 新 情 報 </h1> <h2> 春 の 横 浜 お 勧 め 観 光 スポット</h2> <div class="img"> <img src="images/img001.jpg" alt=" 時 計 台 の 画 像 " class="watch" > </div> <p>4 月 横 浜 の 春 には 恒 例 になった 大 道 芸 イベントが 開 催 されます 野 毛 地 区 伊 勢 佐 木 町 馬 車 道 みなとみらい 地 区 では 様 々な 大 道 芸 人 達 の 妙 技 を 見 ることができます </p> <h3> 春 のお 勧 め 観 光 ルート</h3> <ol> <li> 日 本 大 通 り</li> <li> 中 華 街 </li> <li> 元 町 </li> <li> 山 下 公 園 </li> </ol> <h3> 歴 史 的 建 築 物 群 横 浜 三 塔 </h3> <ul> <li> 赤 レンガ 造 りの 時 計 台 ジャック</li> <li>イスラム 風 建 築 の 横 浜 税 関 クイーン</li> <li> 重 厚 で 壮 麗 な 神 奈 川 県 庁 キング </li> </ul> </body> </html> 正 しく<img src= images/mg001.jpg alt= 時 計 台 の 画 像 class= watch >の 箇 所 が 修 正 されている 8
練 習 問 題 1. 誤 答 例 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>q1</title> <link href="sample.css" rel="stylesheet" type="text/css"> </head> <body> <h1> 横 浜 の 最 新 情 報 </h1> <h2> 春 の 横 浜 お 勧 め 観 光 スポット</h2> <div class="img"> <img src="images img001.jpg" alt=" 時 計 台 の 画 像 " class="watch" > </div> <p>4 月 横 浜 の 春 には 恒 例 になった 大 道 芸 イベントが 開 催 されます 野 毛 地 区 伊 勢 佐 木 町 馬 車 道 みなとみらい 地 区 では 様 々な 大 道 芸 人 達 の 妙 技 を 見 ることができます </p> <h3> 春 のお 勧 め 観 光 ルート</h3> <ol> <li> 日 本 大 通 り</li> <li> 中 華 街 </li> <li> 元 町 </li> <li> 山 下 公 園 </li> </ol> <h3> 歴 史 的 建 築 物 群 横 浜 三 塔 </h3> <ul> <li> 赤 レンガ 造 りの 時 計 台 ジャック</li> <li>イスラム 風 建 築 の 横 浜 税 関 クイーン</li> <li> 重 厚 で 壮 麗 な 神 奈 川 県 庁 キング </li> </ul> </body> </html> <img src= images img001.jpg alt= 時 計 台 の 画 像 class= watch >Windows 上 のローカル 環 境 では 表 示 できるが サーバ 上 にデータをアップロードした 際 には 表 示 されない 9
練 習 問 題 2. 解 答 例 正 答 例 <p><a href="index.html">home</a> <a href="news.html">ニュース</a> <a href= access.html > 交 通 案 内 </a></p> サイトのディレクトリ 構 成 およびリンクの 記 述 を 理 解 して 適 切 にソースファイルに 記 述 されている 誤 答 例 <p><a href= C: Documents and Settings Administrator デスクトップ data P3001 wd index.html >HOME</a> <a href= C: Documents and Settings Administrator デスクトップ data P3001 wd index.html news.html"> ニュース</a> <a href=" C: Documents and Settings Administrator デスク トップ data P3001 wd index.html access.html"> 交 通 案 内 </a></p> 絶 対 パスでリンクが 指 定 されている 10
練 習 問 題 3. 解 答 例 正 答 例 正 しく 画 像 が 配 置 されている 誤 答 例 画 像 の 選 択 間 違 い 11
練 習 問 題 4. 解 答 例 正 答 例 bg1 8KB 誤 答 例 bg4 32KB CSSファイルソースの 指 定 が 誤 っており 背 景 画 像 に bg1.gif( 正 解 )ではなく bg4.gif( 縦 方 向 に 長 い 画 像 )を 使 っている 12
練 習 問 題 6. 解 答 例 正 答 例 正 しくヘッダ メニュー フッタ 文 字 の 色 指 定 が 行 われている 誤 答 例 CSSファイルが 誤 っており ヘッダ メニュー フッタ 文 字 の 色 指 定 が 行 われていない < 免 責 事 項 > 本 練 習 問 題 において 記 載 された 会 社 名 製 品 名 は それぞれの 会 社 の 商 標 もしくは 登 録 商 標 です 設 問 内 ではR TMマークは 省 略 しております 13