Lesson7 ウェブ・サイトの作成の総合演習

各項目の頭に○印のあるものはこのコース独自のものであり、◆ 印のあるものはテキスト・ブックからの引用した項目です。

7−1 ウェブ・サイトの作成の総合演習 (テキストの総合問題)

完成版サイトでこれから行う総合演習の目標を確認する:

 「ホームページ・ビルダー11基礎」フォルダ → 「完成版」 → 「momoyama」 → 「index.html」を
 ダブル・クリックして → 完成版のトップ頁を表示してみる

 ☆ トップ・ページ(桃山コミュニティー・センター)とそれからリンクする3つのページ
    (イベント情報、施設案内、アクセス)
 ☆ 施設案内ページとそれからリンクする3つのページ
(マルティメディア・ルーム、多目的ホール、図書館)
 ☆ 各ページから他のページへのリンク

  等に注目し、大体の構成を確認する。

Exercise1

 テキスト・ブックの291頁及び292頁を参照

(1)つぎのようなウェブ・サイトとトップ・ページを新規作成する。  

ウェブ・サイト名 桃山コミュニティセンター
トップ・ページ 「index.html」で新規作成
作成先のフォルダ フォルダ「My Documents」内にフォルダ「momoyama」を新規作成
画像ファイルの保存先 フォルダ「momoyama」内にフォルダ「image」を新規作成
ページ作成方法 白紙ページ
トップ・ページの表示環境 PCページ
トップ・ページの種類 通常ページ
トップ・ページの編集モード 標準モード

(2)「トップ・ページ」のページ・タイトルを設定する。

(3)「トップ・ページ」の言語指定を日本語にする。   

(4)「トップ・ページ」の1行目にロゴ・マークとして、画像ファイル「title.gif」を挿入する。

(5)上で挿入した画像ファイルの下の行に次の文章を入力し、1段階のインデントを設定する。

   「「桃山市コミュニティセンター」は、市民の皆様が自由に利用していただける施設です。<Enter>

    豊かな地域社会作りのために、コミュニケーション活動の拠点としてご利用ください。 」

(6)「トップ・ページ」の基本色として、任意の色又は壁紙を設定する。

(7)上で挿入した文章の下の行に、次のように入力します。
   「時間:10時・・・・」から「・・・・年末年始」の段落に1段階のインデントを設定する。
   イベント情報「Shift」+「Enter」
   施設案内「Shift」+「Enter」
   アクセス「Shift」+「Enter」
   時間:10時〜19時時間「Enter」
   休館日:毎週水曜日(祝日の場合は木曜日)、年末年始

(8)「イベント情報」「施設案内」「アクセス」に適当な書式を設定する。

(9)上で入力した文章の下にCopy Rightの文を入力し、右揃えにする。

(10)「イベント情報」の先頭にコミュニティセンターの画像ファイル「center.jpg」を挿入し、
    画像の左右に少しの余白を挿入する。また、画像の右側に文字を回り込ませ、
    「アクセス」で回り込みを終了させる。

(11)画像ファイル「title.gif」の下と「休館日:毎週・・・」の文章の下に水平線を挿入し、
    適当な属性を設定をする。   

(12)挿入した画像ファイルト」イラストに、適当な代替テキストを設定する。
     

(13)トップ・ページを上書き保存し、閉じましょう。 画像ファイルのファイル名は変更せず保存する。

Exercise2

 テキスト・ブックの293頁及び294頁を参照

 (1)「イベント情報」(event.html)頁の作成

    ☆ 「総合練習」のフォルダから「event.htm」を読み込んで以下の編集をする。

    ☆ 「詳しくは・・・」の下の行に次のような表を2つ作成する。

展示
日時 催し物 場所
3月1日(木)〜3月11日(日) 地域文化フェスティバル 1階中央ホール
3月10日(土)〜3月19日(月) ふれあい写真展 多目的ホール
3月21日(水)〜3月31日(土) 水彩画展 多目的ホール

    

講座
日時 講座内容 場所
3月30日(金) 10時〜12時 話し方教室 多目的ホール
3月30日(金) 13時〜15時 ペン習字 多目的ホール
3月30日(金) 16時〜18時 囲碁教室 多目的ホール
毎週月曜 14時〜16時 パソコン入門 マルチメディアルーム
毎週金曜 14時〜16時 インターネット体験 マルチメディアルーム

   ☆ 表の下に「TOP」ボタンを挿入する。

   ☆ 「event.htm及び取り込んだ画像をサイトの中に保存します。 

(2)「イベント情報」(libray.html)頁の作成

   ☆ 「総合練習」のフォルダから「libraryt.htm」を読み込んで以下の編集をする。

   ☆ 「カードは・・・」の行の下に6行2列の表を挿入し、完成版に倣って各セルに画像とテキスト
      を挿入する。

   ☆ 「libray.html」及び取り込んだ画像をサイトの中に保存します。

(3)同様にして、「access.html」「hall.html」「infi.html」「media.html」を「総合練習」のフォルダから
   取り込んで、保存する。

Exercise3

 テキスト・ブックの295頁から297頁を参照

(1)テキスト・ブックの295頁のリンク図を参考にして、必要な頁の必要な箇所に「TOP」ボタン
   と「TOP」ボタンを挿入する。

(2)テキスト・ブックの295頁のリンク図を参考にして必要なリンクをはる。

(3)半角カナ変換とアクセシビリティ・チェックを行う。

(4)ウェブ・ページトウェブ・サイトを保存する。