ホームページ作成検定試験ホームペーシ作成模擬問題集Expression Web4試験問題解答方法2023年4月ホバー入りーサ処理検定協会ホームページ作成検定試験についての注意事項や作成手順などを紹介します。ここで紹介する手順は、Expres sionWeb4を基に説明しています。
武鉄前にすること
問題文の処理条件に指定されているファイルには、「html」、「gif」、「jpg」、「png」などの拡張子が記述されています。パソコンの設定によって拡張子が表示されない場合があるので、問題を解く前に拡張子を表示する設定をします。任意のフォルダーを開き[表示]タブをクリックし、[表示/非表示]グループの中にある[ファイル名拡張子]にチェックを入れます。設定し終えたらデータのあるフォルダーを開き、拡張子が表示されていることを確認してください。 (2)あらかじめ作成ページの設定しておくと、解くうえで便利です。 「Expression Web 4」を起動します。スタートメニューから[Microsoft Expression]のフォルダーをクリックし、 [Microsoft Expression We b 4]をクリックします。 3メニューバー[ツール]の[ページ編集オプション]を選択します。 [作成]タブの[ドキュメントの型宣言]を「なし」に変更します。 (5) (8)メニューバーの[ファイル]の[新規]から、[HTML]を選択します。 [CSS]タブの[枠線]を「CSS（インラインスタイル）」に変更し[OK]をクリックします。メニューバー[表示]の[書式設定記号]にある[表示]を選択します。設定が終了したら、「無題_1.html」タブにある￼をクリックしてページファイルを閉じます。 ※この操作は設定後のみ行ってください。フォルダーの「受験番号」と「名前」をそれぞれ変更します。 ※受験番号は試験日当日までに発表されます。 (1)フォルダーの上で右クリックし、[名前の変更]を選択します。 2) ◆変更する際に次のことに気を付けてください。 V受験対象級（HP1、HP2、HP3、HP4）およびアンダーバー（ _ ）は削除しない。受験番号は半角入力とする。 A Y名前は全角入力とする。 Vスペースを入れない。
作成ページ例について
作成ページ例はブラウザーの互換モードで表示されるように作成されています。作成ソフトやブラウザーによって作成ページ例と表示が多少異なる場合もあります。異なる場合でも、指示どおりに作成されていれば減点はありません。メニューバーの[表示]から[ツールバー]をクリックし、表示したい項目にチェックを入れることでツールバー
<問1.試験時間は３０分とし、保存の時間も含まれる。 2． 【HP3-00_受験番号_名前】フォルダー内の各データを使用し、保存も同一フォルダーとする。 ＜処理条件＞ 1.受験番号、名前を入力しなさい。 2．ページタイトルを入力しなさい。タイトルは“翼ツアーズ”とする。 3.ページにスタイルシート“style.css”をリンクしなさい。 4． ＜レイアウト＞を参考にして表を挿入し、丸番号ごとの指示に従って作成しなさい。枠は非表示とする。 ①文字入力をし、見出し１にしなさい。城下町バスツアー
②文字入力をし、番号なしリストにしなさい。ツアー詳細（リンク:page1.html）申込方法（ﾘﾝｸ：page2.html）翼ツアーズについて(リンク:page3.html)お問い合わせ※ “お問い合わせ”にメールリンクの挿入をする。 (tsubasa@goukaku.ne.jp)
③文字入力、画像挿入、表挿入をしなさい。

5.作成ページを保存しなさい。ファイル名は“index.html”とする。
3破練習問題解答方法
問題文を基に処理条件に従って３級の解答をします。使用データの確認問題に使用するフォルダーの名前を変更し、データを確認します。受験番号・名前の入力受験番号、名前を入力しなさい。 1.受験番号、名前を入力します。ページタイトルの設定2.ページタイトルを入力しなさい。タイトルは“翼ツアーズ”とする。受験番号、名前の下で右クリックし、[ページのプロパティ]を選択します。 [全般]タブの[タイトル]に「翼ツアーズ」と入力し、[O K]をクリックします。タイトルバーにページタイトルが表示されたことを確認します。 ３．ページにスタイルシート“style.css”をリンクしなさい。 (1)メニューバーの[書式設定]の[CSSスタイル]から[スタイルシートの添付]を選択します。 2)
[参照]をクリックします。ファイルの場所がデータのあるフォルダーであることを確認し、[style.css]をクリックして[開く]をクリックします。 4) [適用方法]が[リンク]になっていることを確認し、 [OK]をクリックします。 (5)ダイアログボックスを閉じると、背景画像が適用されます。 4． ＜レイアウト＞を参考にして表を挿入し、丸番号ごとの指示に従って作成しなさい。枠は非表示とする。 ＜レイアウト＞
枠が非表示の表を作成し、各セルの丸番号の指示どおりに作成をします。

枠が非表示の表を挿入
(1)
そルのお
入力した文字の下をクリックします。メニューバーの[テーブル]の[テーブルの挿入]を選択します。 2) [行]に「2」、[列]に「2」と入力し、[幅の指定]のチェックを外して[OK]をクリックします。検定のポイント[幅の指定]のチェックを外さないと、表の幅がページ全体に広がり減点となるため、必ずチェックを外してください。結合するセルをドラッグして選択し、メニューバーの[テーブル]の[変更]から[セルの結合]を選択して結合します。選択したセルの上で右クリックし、[変更]から[セルの結合]を選択しても同じ設定ができます。セルが結合されました。 ①文字入力をし、見出し１にしなさい。城下町バスツアン
番号なしリスト・リンクの設定
②文字入力をし、番号なしリストにしなさい。ツアー詳細（ﾘﾝｸ：page1. html）申达方法（リンク: page2. html ）翼ツアーズについて(リンク:page3.html)お問い合わせ①のセルに文字入力をし、入力した文字をドラッグして選択します。ツールバーの（なし）　・ [スタイル]をクリックし、[見出し1]を選択します。見出し１に設定されました。番号なしリストの設定②のセルに「ツアー詳細」と入力をし、入力した文字をドラッグし選択します。ツールバーの参画[箇条書き]をクリックします。改行し、「申込方法」、「翼ツアーズについて」、「お問い合わせ」を入力します。模作のせイントく番号付きリストを設定する場合＞ 「ツアー詳細」と入力し、入力した文字をドラッグして選択し、ツールバーの[番号]をクリックします。改行して残りの文字を入力します。 「ツアー詳細」をドラッグして選択します。メニューバーの[挿入]の[ハイパーリンク]を選択します。ドラッグした文字の上で右クリックし[ハイパーリンク]を選択しても同じ設定ができます。 [リンク先]を[ファイル、Webページ]をクリックし、[検索先]をデータのあるフォルダーに変更して、[page1.html]を選択します。 [OK]をクリックします。リンクの指示のある「申込方法」「翼ツアーズについて」も同様の手順で設定します。メールリンクの挿入※“お問い合わせ”にメールリンクの挿入をする。(tsubasa@goukaku.ne.jp) (1) ｢お問い合わせ｣をドラッグして選択し、メニューバーの[挿入]の[ハイパーリンク]を選択します。ドラッグした文字の上で右クリックし[ハイパーリンク]を選択しても同じ設定ができます。 (2) [リンク先]を[電子メールアドレス]を選択し、[電子メールアドレス]に「tsubasa@goukaku.ne.jp」と入力して[OK]をクリックします。 ※「mailto:」は、メールアドレスを入力すると自動で入ります。検定のポイントメールアドレスは必ず半角で入力してください。画像の挿入・代替テキスト・見出し２の設定・表の挿入・水平線の設定③文字入力、画像挿入、表挿入をしなさい。画像“pic.gif” （代替テキスト“城と町並みのイラスト”）天守閣入場券付き（見出し２）城下町でショッピングもお楽しみいただけます。昼コース|城からの見晴らしは最高夜コース|夜界とライティングが素敵(表の枠表示)価格6, 350円(水平線の挿入)콩ツアーズ事務局052–985–2512
画像の挿入
(1) ③セルにカーソルを移動します。メニューバーの[挿入]の[画像]から[ファイルから]を選択します。 (2)データのあるフォルダーに移動し、[pic.gif]を選択して[挿入]をクリックします。 [代替テキスト]に「城と町並みのイラスト」と入力し、[OK]をクリックします。画像が挿入されました。画像が挿入されたら、改行をします。撮作のボント画像の上で右クリックし[画像のプロパティ]を選択しても代替テキストの設定ができます。 [全般]タブを選択し、[代替テキスト]に「城と町並みのイラスト」と入力し、[OK]をクリックします。 ＜代替テキストとは＞画像が表示されないときに、代わりに表示される文字です。困城と町並みのイラストカーソルを下に移動後、「天守閣入場券付き」から「お楽しみいただけます。」まで入力します。 「天守閣入場券付き」をドラッグして選択します。ツールバーのほい　 [見出し2]を選択します。 3 (1) 3
3余分な改行を削除します。検定のポイント余分な改行は減点となりますので、必ず削除をしてください。余分な改行が削除されました。表の挿入(1)文字入力後、改行をし、表の挿入を行います。 [行]に「2」、[列]に「2」と入力し、[幅の指定]のチェックを外します。 [セル間のスペース]を「O」にし、[OK]をクリックします。表が挿入されました。挿入した表のセルをすべて選択し、ツールバーの画[外枠線]の隣にある◄矢印をクリックして、 [すべての枠線]を選択し、枠線を表示させます。 (4)表の挿入後、表内に文字を入力し、下矢印キーでカーソルを表の下に移動させます。カーソル移動後「価格6,350円」を入力します。検定のポイント英数字、記号については全角半角を問いません。水平線の挿入「価格6,350円」を入力後、改行せずにメニューバーの[挿入]の[HTML]から[水平線]を選択します。水平線が挿入されました。水平線の挿入ができたら、残りの文字を入力します。作成ページの保存5.作成ページを保存しなさい。ファイル名は“index.html”とする。 (1)メニューバーの[ファイル]を選択し、[名前を付けて保存]を選択します。保存する場所をデータのあるフォルダーに変更し、[ファイル名]に「index.html」と入力し、[保存]をクリックします。検定のポイントファイル名は必ず半角で入力してください。
リンクの確認
(1) (2)ページ完成後、動作をブラウザーで確認します。作成したファイルがあるフォルダーを開き、「index. html」を開きます。ページが表示されたら、「ツアー詳細」をクリックし、リンク先のページが表示されるのを確認します。ページが表示されたら、「トップページへ」をクリックし、作成したページが表示されることを確認します。「申込方法」「翼ツアーズについて」も同様にリンクの確認を行います。
メールアドレスの確認
メールアドレスが挿入されている部分にカーソルを合わせ、ブラウザーの下側に表示されるステータスの表示でアドレスを確認してください。メールアドレスは[mailto:tsubasa@goukaku.ne. jp]と表示されます。 (左図：ブラウザーの表示例)メールアドレスをクリックすると、メーラーが起動し、確認するまでに時間がかかってしまう場合があります。セルの結合を行った後に、枠線の処理を行うと、枠線が正しく作成されない場合があります。この場合、枠線の設定ミスで減点となりますのでお気を付けください。この枠線が東京されない
そのfb
スタイルシートについて
スタイルシート（Cascading Style Sheets）とは、HTMLファイルに書かれた見出しや表といった要素などに装飾の設定をするものです。スタイルシートを使用したページHTMLは文字や画像などの内容のみ、スタイルシートは装飾、と役割を分担します。例えるなら、HTMLは記事を書くライター、スタイルシートは記事を見やすくしたり、華やかにしたりするデザイナーになります。スタイルシートの利点●デザインの幅が広がるHTMLタグだけではできなかったデザインがスタイルシートでできます。 ●デザインを一括で管理できるスタイルシートをリンクしたページすべてに設定内容が反映され、デザインが一括で管理できるので作業の量が少なくなります。
●1ページのデータ容量を小さくできる
HTMLファイルごとの装飾をなくすことで、データの容量は小さくなり表示される速度が速くなります。
問題裏面について
実際の検定問題の裏面には次ページのように検定の事前準備や基本的なルールが記載されています。 Nicrosoft , Expression %eb4 , %indowsは、マイクロソフトグループの企業の間標です。マイクロソフトの許諾を得て使用しています。
その他、本書に登場する製品名は、一般に各開発メーカーの商標および登録商標です。
本文中には、*、◎マークは明記しておりません。

事前準備
1．受験する級のフォルダーが配布されているか確認すること。 1級受験者→   ■  HP1_受験番号_名前２級受験者→  ■  HP2_受験番号_名前３級受験者→   ■  HP3_受験番号_名前4級受験者→ 2．フォルダーの中に受験用データがあるか確認すること。 3．配布されたフォルダー名の受験番号と名前を変更しなさい。 (例) 001  E HP3 ※受験対象級（HP1、HP2、HP3、HP4）およびアンダーバー（ _ ）は削除しない。 ※受験番号は半角入力とする。 ※名前は全角入力とする。 ※スペースを入れない。 <手順> ①フォルダーの上で右クリックし[名前の変更]を選択する。 ② “受験番号”を削除し半角文字で受験番号を入力する。 ③“名前”を削除し全角文字で名前を入力し、Enterキーで確定する。 ●＜作成ページ例＞、＜レイアウト＞を参照し、＜処理条件＞に従って作成し、保存しなさい。 ●太字は処理条件とし、配置の指示のない場合は左寄せとし、改行位置は問題のとおりとする。