Mozilla のスプラッシュページ

今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！

前提条件: この評価試験を試す前に、残りのマルチメディアとその埋め込み方のモジュールに既に取り組んでいる必要があります。
目的: ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。

出発点

この評価試験を開始するには、github の mdn-splash-page-start ディレクトリにある HTML とすべての画像を取得する必要があります。 index.html の内容をローカルドライブの新しいディレクトリの index.html というファイルに保存します。 それから、pattern.png を同じディレクトリに保存します（画像を右クリックして保存するオプションを選びます）。

originals ディレクトリの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディタを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリに保存する必要があります。

メモ: 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 <body> 要素内の HTML だけで、CSS に触れる必要はありません — 正しいマークアップを挿入する限り、スタイリングは正しく表示されます。

プロジェクトの概要

今回の評価試験では、ほとんど完成した Mozilla のスプラッシュページを紹介しています。 これは、Mozilla が何を意味しているかについて、何か素敵で興味深いことを言い、さらなるリソースへのリンクを提供することを目的としています。 残念ながら、画像や動画はまだ追加されていません — これがあなたの仕事です！ ページの見栄えを良くし、もっと理にかなったものにするために、いくつかのメディアを追加する必要があります。 次のサブセクションでは、実行する必要があることを詳しく説明します。

画像の準備

お気に入りの画像エディタを使用して、次のものから 400px 幅と 120px 幅のバージョンを作成します。

  • firefox_logo-only_RGB.png
  • firefox-addons.jpg
  • mozilla-dinosaur-head.png

たとえば、firefoxlogo400.png と firefoxlogo120.png のように、それらを判りやすい名前にしてください。

mdn.svg に加えて、これらの画像は、further-info 領域内のさらなるリソースにリンクするアイコンになります。 また、サイトヘッダーの firefox ロゴにもリンクします。 これらすべてのコピーを index.html と同じディレクトリに保存します。

次に、red-panda.jpg の 1200 ピクセル幅のランドスケープバージョンと、パンダをより近くに見せてくれる 600 ピクセル幅のポートレートバージョンを作成します。 繰り返しますが、それらを簡単に識別できるように、判りやすい名前にしてください。 これらの両方のコピーを index.html と同じディレクトリに保存します。

メモ: JPG 画像と PNG 画像を最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 tinypng.com は簡単にこれを行うための素晴らしいサービスです。

ヘッダーにロゴを追加する

<header> 要素の中に、小さなバージョンの Firefox ロゴをヘッダーに埋め込む <img> 要素を追加します。

主要記事のコンテンツに動画を追加する

<article> 要素の内側（開始タグのすぐ下）に、 https://www.youtube.com/watch?v=ojcNcvb1olg にある YouTube 動画を適切な YouTube ツールを使用してコードを生成して埋め込みます。 動画の幅は 400 ピクセルです。

further-info クラスを持つ <div> の中には、それぞれが興味深い Mozilla 関連のページにリンクする4つの <a> 要素があります。 このセクションを完成させるには、適切な src、alt、srcset、sizes の各属性を含む <img> 要素をそれぞれの内部に挿入する必要があります。

いずれの場合でも (1つを除く — どれが本質的にレスポンシブですか？)、ブラウザーにビューポートの幅が 500px 以下の場合は 120px 幅のバージョン、それ以外の場合は 400px 幅のバージョンを提供したい。

正しい画像と正しいリンクが一致していることを確認してください！

メモ: srcset と sizes の例を適切にテストするには、サイトをサーバーにアップロードする必要があります (Github ページを使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の Network Monitor などのツールを使用して正しく動作しているかどうかをテストできます。

アートディレクションされたレッサーパンダ

red-panda クラスを持つ <div> の中に、ビューポートの幅が 600px 以下の場合は小さなポートレートのパンダ画像を提供する <picture> 要素を挿入し、それ以外の場合は大きなランドスケープ画像を挿入します。

例

以下のスクリーンショットは、広い画面と狭い画面で、スプラッシュページが正しくマークアップされた後にどのように見えるかを示しています。

サンプルのスプラッシュページの広い画面のショット

サンプルのスプラッシュページの狭い画面のショット

評価

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

メモ: 評価試験を Chrome ブラウザーのデベロッパーツールで行った場合、「レスポンシブビュー」でどんなに幅を狭く設定しても正しい画像が読み込めないことがあります。これは Chrome の特性のようです。 Firefox ブラウザーは (HTML が正しければ) 正しい画像を読み込みます。

 

このモジュール内の文書