PowerPoint プレゼンテーション

Page 1/ 13
Web Design 3級実技実習ガイド
講義一覧
講義回
講義タイトル
講義概要
第１回
3級実技試験について
ガイダンス
第２回
HTMLによる文書構造化
HTML言語の復習
第３回
CSSスタイルシートのプロパティ・値
CSSスタイルシートの復習
第４回
実技実習作業１
【問題１】
ディレクトリとファイルの配置位置に関する問題
第５回
実技実習作業２
【問題２】
HTMLファイルの修正（リンク設定）に関する問題
第６回
実技実習作業３
【問題３】
スタイルシートとページレイアウトの関係に関する問題
第７回
実技実習作業４
【問題４】
スタイルシートの修正（文字色・背景色の設定に関する問題
第８回
実技実習作業５
【問題５】
スタイルシートの修正（イメージファイルの設定）に関する問題
第９回
実技実習作業６
【問題６】
HTMLファイルの修正（文字列の記述）に関する問題
補足説明：
第１回は、３級実技試験の試験内容等。
第２回～第３回は、試験対象となる言語の復習。
第４回～第９回は、過去の試験問題を基に作成した模擬問題の解答・解説です。
以下は、各実技実習作業ごとの「問題」「学習のポイント」「解答作業手順」です。
Page 2/ 13
Web Design 3級実技実習ガイド
第4回実技実習作業１
【問題１】次の（１）～（３）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題1」フォルダ内にある、「実習問題1_ディレクトリ・ファイル配置図.jpg」に従い、HTML
ファイル、CSSファイル、画像ファイル等のソースファイルおよびディレクトリを適切に構成・配置しなさい。
（２）その際、必要に応じてフォルダ等を作成し、CSSファイルや画像ファイルが正しく適用されるように、index.html およ
び CSSファイルを編集しなさい。
（３）デスクトップ上に「解答1」と言う名前でフォルダを作成して、フォルダおよびソースファイルを構成・配置に留意して
保存しなさい。
【学習のポイント】
ディレクトリとファイルの設置（配置）位置の問題です。具体的には、2種類のイメージファイル（ボタン(HTML)とタイト
ル(CSS)）の設定とディレクトリの構成設定です。
Page 3/ 13
Web Design 3級実技実習ガイド
第4回実技実習作業１
【問題１解答作業手順】
1.「ディレクトリ・ファイル配置図」を開く。（確認する）
2.必要なフォルダを作成する。→「解答1」「gnbutton」「image」
3.「解答1」フォルダ内に、次のファイルをコピーする。
contact.html
guide.html
index.html
qa.html
shopinfo.html
shopping.html
style.css
4.「gnbutton」フォルダ内に、次のファイルをコピーする。
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
toppage.jpg
5.「image」フォルダ内に、次のファイルをコピーする。
title_image.jpg
6.「解答1」フォルダ内のindex.htmlを開く（確認する）
Page 4/ 13
Web Design 3級実技実習ガイド
第５回実技実習作業２
【問題２】次の（１）～（３）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題2」フォルダ内にある、index.html、contact.html、guide.html、qa.html、shopinfo.html、
shopping.html の「gnavi」で指定されたエリアに、グローバルナビゲーションを作成し、対応する各ページへ正しく遷移す
るように設定しなさい。
（２）グローバルナビゲーションは、「トップページ」は index.html、「ショッピング」は shopping.html、「ショッピングガイ
ド」は guide.html、「よくある質問」は qa.html、「店舗情報」は shopinfo.html、「お問合せ」は contact.html に、それぞれリ
ンク設定しなさい。
（３）デスクトップ上に「解答2」と言う名前でフォルダを作成して、フォルダ（content、image）およびソースファイルを適
切に構成・配置して保存しなさい。
【学習のポイント】
<a>タグにより、グローバルナビゲータ部分のリンク（６個）のボタン配置と設定の問題です。（CSSファイルは変更なし）
サブページのHTMLファイル用フォルダ(contents)と画像用フォルダ(images)があり、サブページにもグローバルナビの
ボタン配置と設定を行う必要があります。
Page 5/ 13
Web Design 3級実技実習ガイド
第５回実技実習作業２
【問題２解答作業手順】
1.index.htmlファイルをエディタで開き、ソースを確認する。（特に、「gnavi」部分のイメージファイル、リンク設定等を確認する。）
2.「解答2」フォルダを作成する。
3.「解答2」フォルダ内に、次のフォルダとファイルをコピーする。（フォルダ内のファイルは、フォルダと一緒にコピーする。）
フォルダ：「content」 contact.html
guide.html
qa.html
shopinfo.html
shopping.html
「image」
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
title_image.jpg
toppage.jpg
ファイル： index.html
style.css
4.index.htmlファイルの「gnavi」部分のイメージファイル、リンク設定等を修正する。（具体的には、<a>タグにて、リンク設定を
追加する。）
5.index.htmlファイルの「gnavi」部分を、次のHTMLファイルの「gnavi」部分にコピーする。（グローバルナビゲーションなので、
各ファイル共通で同じになる。）
6.「解答2」フォルダ内のindex.htmlをブラウザで開き、動作を確認する。
Page 6/ 13
Web Design 3級実技実習ガイド
第６回実技実習作業３
【問題３】次の（１）～（３）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題3」フォルダ内にある、index.html を編集し、表示サンプルのように適切に表示される
よう３つのスタイルシート（style1.css、style2.css、style3.css）から適切ななものを選択して設定しなさい。
（２）使用するブラウザが、Internet Explorer の場合の表示サンプルは、sample_view3_IE.jpg、firefox の場合の表示サ
ンプルは、sample_view3_FF.jpg とする。
（３）デスクトップ上に「解答3」と言う名前でフォルダを作成して、フォルダ（image）およびソースファイルを適切に構成・
配置して保存しなさい。
【学習のポイント】
画面のハードコピーを参考に、指定されたレイアウト画面になるように、修正する問題です。具体的には、３つのスタ
イルシートの内、1つを選択しCSSファイルのリンクを設定します。３つのスタイルシートの内容を読み取ることが重要で
す。
Page 7/ 13
Web Design 3級実技実習ガイド
第６回実技実習作業３
【問題３解答作業手順】
1.「sample_view3_IE.jpg」「sample_view3_FF.jpg」を開く。（作業前のindex.htmlファイルをブラウザで開き、見比べる。）
2.index.htmlファイルをエディタで開き、ソースを確認する。（特に、styleシートのリンク設定部分を確認する。）
3.「解答3」フォルダを作成し、「解答3」フォルダ内に、次のフォルダとファイルをコピーする。
フォルダ：「image」
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
title_image.jpg
toppage.jpg
ファイル： index.html
style1.css
style2.css
style3.css
※本来は、styleシートをエディタで開いて読み取り、正しいCSSファイルを設定するのが正攻法であろうが、画面で確認する方法をここでは説明する。
4.index.htmlファイルのstyleシートのリンク設定部分を順次変更する。
（具体的には、<link rel="stylesheet">タグにて、href設定にstyle1.css、style2.css、style3.cssと順次記述する。）
5.index.htmlファイルのstyleシートのリンク設定部分を修正後し、ブラウザで開いて確認する。
6.正しいindex.htmlを保存し、不要なCSSファイルを削除する。
Page 8/ 13
Web Design 3級実技実習ガイド
第７回実技実習作業４
【問題４】次の（１）～（２）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題4」フォルダ内にある、style.css を編集し「content」エリアの背景色を #666666 に、文字
色を#00FF00 に設定しなさい。
（２）デスクトップ上に「解答4」と言う名前でフォルダを作成して、フォルダ（image）およびソースファイルを適切に構成・
配置して保存しなさい。
【学習のポイント】
指定されたレイアウトの内容に修正する問題です。具体的には、CSSファイル内の#content部分の背景色と文字色を
修正します。スタイルシートの内容を熟知していることが重要です。
Page 9/ 13
Web Design 3級実技実習ガイド
第７回実技実習作業４
【問題４解答作業手順】
1.「解答4」フォルダを作成する。
2.「解答4」フォルダ内に、次のフォルダとファイルをコピーする。（フォルダ内のファイルは、フォルダと一緒にコピーする。）
フォルダ：「image」
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
title_image.jpg
toppage.jpg
ファイル： index.html
style.css
3.エディタでstyle.cssファイルを開き、「content」エリアの背景色を#666666に変更する。
4.続けて、「content」エリアの文字色を#00FF00 に変更し、CSSファイルを保存する。
5.「解答4」フォルダ内のindex.htmlをブラウザで開き、変更箇所を確認する。
Page 10/ 13
Web Design 3級実技実習ガイド
第８回実技実習作業５
【問題５】次の（１）～（３）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題5」フォルダ内にある、index.html が表示サンプルのように表示されるように、bg_img
フォルダ内の適切なイメージファイルを選択して、スタイルシートを編集・設定しなさい。
（２）使用するブラウザが、Internet Explorer の場合の表示サンプルは、sample_view5_IE.jpg、firefox の場合の表示サ
ンプルは、sample_view5_FF.jpg とする。
（３）デスクトップ上に「解答5」と言う名前でフォルダを作成して、フォルダ（bg_img、image）およびソースファイルを適切
に構成・配置して保存しなさい。
【学習のポイント】
指定されたレイアウト画面の内容に修正する問題です。具体的には、CSSファイル内のbody部分とwrap部分にイメー
ジファイルを設定します。その際、指定されたフォルダ（bg_img）内に用意されたイメージファイルの中から、body用と
wrap用に、それぞれイメージファイル（jpg）を選択する必要があります。反映されるスタイルシートの内容を熟知してい
ることが重要です。
Page 11/ 13
Web Design 3級実技実習ガイド
第８回実技実習作業５
【問題５解答作業手順】
1.「問題5」フォルダ内のindex.htmlをブラウザで開き、「sample_view5_IE.jpg」または「sample_view5_FF.jpg」と比較し、画面上の違いを確認
する。
2.「問題5」フォルダ内のindex.htmlをエディタで開き、修正箇所を特定する。（結果、イメージを設定する箇所、bodyのbackground と divエリ
ア「#wrap」のbackgroundを特定する。）
3.デスクトップ上に「解答5」フォルダを作成し、その中に、次のフォルダとファイルをコピーする。（フォルダ内のファイルは、フォルダと一緒
にコピーする。）
フォルダ：
「bg_img」
bg_image1.jpg
bg_image2.jpg
bg_image3.jpg
bg_pat1.jpg
bg_pat2.jpg
bg_pat3.jpg
「image」
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
title_image.jpg
toppage.jpg
ファイル：
index.html
style.css
4.「解答5」フォルダ内のstyle.cssファイルをエディタで開き、bodyのbackground と「#wrap」エリアのbackgroundにイメージを設定する。
5.「解答5」フォルダ内のindex.htmlをブラウザで開き、「sample_view5_IE.jpg」または「sample_view5_FF.jpg」と比較・確認する。
（※１の画面で指定のイメージファイルが特定できれば、1回の設定・確認。特定できなければ、順次イメージファイルを設定・確認する。4と
5を繰り返す。）
6.「解答5」フォルダ内の「bg_img」フォルダ内にある、不要なイメージファイルを削除する。
Page 12/ 13
Web Design 3級実技実習ガイド
第９回実技実習作業６
【問題６】次の（１）～（３）の実習作業を行いなさい。
（１）デスクトップ上の「実習問題6」フォルダ内にある、index.html の「content」で指定されたエリアに、content.txt ファ
イルの内容を配置しなさい。
（２）その際、「イベント情報」「更新情報」のタイトルは、h2要素とし、イベント情報の内容は番号付きリスト、更新情報
の内容はドット付きリストとして設定しなさい。
（３）デスクトップ上に「解答6」と言う名前でフォルダを作成して、フォルダ（image）およびソースファイルを適切に構成・
配置して保存しなさい。
【学習のポイント】
指定されたレイアウトの内容に、 HTMLファイルを修正する問題です。具体的には、contentエリア内にcontent.txtで指
定された文字列を記述します。その際に、h2要素のタイトル、番号付きリスト、ドット付きリストの設定があります。HTML
言語の要素等を熟知していることが重要です。
Page 13/ 13
Web Design 3級実技実習ガイド
第９回実技実習作業６
【問題６解答作業手順】
1.デスクトップ上に、「解答6」フォルダを作成する。
2.「解答6」フォルダ内に、次のフォルダとファイルをコピーする。（フォルダ内のファイルは、フォルダと一緒にコピーする。）
フォルダ：「image」
contact.jpg
guide.jpg
qa.jpg
shopinfo.jpg
shopping.jpg
title_image.jpg
toppage.jpg
ファイル： index.html
style.css
3.「解答6」フォルダ内のindex.htmlファイルと「問題6」フォルダ内のcontact.txtファイルをエディタで開く。
4.index.htmlファイル内の「content」エリアに、contact.txtファイル内の内容をコピーする。
5.見出し要素（<h2>）、番号付リスト（<ol>）、ドット付リスト（<ul>）の設定を行う。
6.「解答6」フォルダ内のindex.htmlをブラウザで開き、変更箇所を確認する。

Download Report