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