コンテンツページを構造化する

CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。

前提条件: この評価を試みる前に、「ドキュメントとWebサイトの構造」に特に重点を置いて、コースの残りの部分を通してすでに学習していること。
目的: Web ページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。

スタートポイント

この評価を開始するには、すべての開始アセットを含むzipファイルを入手してください。 zip ファイルには以下が含まれています。

  • 構造的マークアップを追加する必要がある HTML
  • マークアップをスタイルするための CSS
  • ページで使用されている画像

ローカルコンピュータで例を作成するか、あるいは JSBinThimble などのサイトを使用して評価を行います。

プロジェクト概要

このプロジェクトでは、あなたの仕事は、バードウォッチング Web サイトのホームページのコンテンツを取得し、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは:

  • ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダ。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら2つの項目の下に表示されます。
  • ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの2つの列を含むメインコンテンツ領域。
  • 著作権情報とクレジットを含むフッター。

以下に適したラッパーを追加する必要があります。

  • ヘッダー
  • ナビゲーションメニュー
  • メインコンテンツ
  • ウェルカムテキスト
  • 画像サイドバー
  • フッター

また、する必要があることは:

  • 開始時に提供された既存の CSS のすぐ下に別の<link> 要素を追加して、提供された CSS をページに適用します。

ヒント

  • W3C Nu HTML Checker を使用して HTML、CSS、および SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。
  • この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
  • 提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。
  • 動けなくなって、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。

次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

評価

あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もしあなたが自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC#mdn IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません!

このモジュール