Webクリエイター能力認定試験 エキスパート
模擬問題1(HTML5)実技問題

» 問題1に進む «

Webサイトの概要・仕様

以下の「テーマ」「ページ構成」「フォルダーおよびファイル構成」「仕様」に従い、Webサイトを完成させなさい。

テーマ

  • 動物園「ZOO LOGICAL」のWebサイトである。
  • トップページには、スライドショーとお知らせを掲載する。
  • 「動物園について」ページでは、動物園の説明と広場の紹介文を掲載する。
  • 「ガイドのご案内」ページでは、動物解説のガイド案内を一覧表で掲載する。
  • 「人気の動物たち」ページでは、動物を画像と紹介文とのセットでサムネイルとして掲載する。
  • 「お問い合わせ」ページでは、お問い合わせフォームを設置する。

ページ構成

下図の通りのページ構成とし、トップページと各ページは相互にリンクさせること。

フォルダーおよびファイル構成

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 問題で使用するJavaScriptファイルは、「js」フォルダー内のファイルを使用すること。
  • 「material」フォルダーには、「start.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start.html」からWebブラウザーで開き、確認すること。
  • 「実技用」フォルダー
    • start.html
    • 「material」フォルダー
    • 「site」フォルダー
      • about.html ★新規作成
      • animals.html ★新規作成
      • base.html
      • contact.html ★新規作成
      • guide.html ★新規作成
      • index.html ★新規作成
      • 「css」フォルダー
        • common.css
        • responsive.css
        • style.css
      • 「js」フォルダー
        • slideshow.js
      • 「images」フォルダー
        • about_photo1.jpg
        • about_photo2.jpg
        • animals_photo1.jpg
        • animals_photo2.jpg
        • animals_photo3.jpg
        • animals_photo4.jpg
        • animals_photo5.jpg
        • animals_photo6.jpg
        • bg.jpg
        • bg_arrow.png
        • bg_footer.png
        • bg_h1_bottom.gif
        • bg_h1_left.png
        • bg_h2_bottom.png
        • bg_h2_head.png
        • bnr_contact.png
        • bnr_guide.png
        • graphic1.png
        • graphic2.png
        • graphic3.png
        • logo.png
        • nav1.png
        • nav2.png
        • nav3.png
        • nav4.png
        • path_arrow.png

仕様

以下の仕様で記述すること。

  • マークアップ言語:HTML5
  • スタイルシート:CSS 2.1およびCSS3
  • スクリプト:JavaScript
  • 文字コード:UTF-8(BOM付推奨)
  • 改行コード:CR+LF

» 問題1に進む «