戻る

先週と今週の２週間をかけて全３ページ構成のサイトを作成しています。今回はその後半です。

前回はindex.htmlを完成させるところまで進めました。 参考までに前回の内容はこちら。
今回は残りの２ページを作成しサイトを完成させます。

そしてサイトで使用したHTMLファイルや画像ファイルなどをすべてmoodleに提出してください。

今日の作業量は前半よりも少ないので、おそらく楽なはずです！

現在このようなサイトを作成しています。

あなたが気になるトレンドワードを先生に紹介するサイトです。
以下のようなデザインで作成してください。上部の赤いところをクリックすると、３ページに分かれるサイトです。

作成例（ここをクリックすると、大きな画面で動作確認ができます）

ページ構成は、以下のようにします。（index.htmlは前回の作業で完成しているはずです）

前回の作業で完成させたindex.htmlを複製し、残りの２ページを作ります。

問題がなければ、index.htmlを「右クリック」→「コピー」し、近くの空いた場所で「右クリック」→「貼り付け」をしましょう。ファイルが複製されます。（ショートカットキーを使う場合はindex.htmlをクリックして選択し、キーボードでCtrlキーを押しっぱなしにして「C」「V」と押しても複製できます）

合計３ページ必要なので、もう一つ複製しましょう。さらに近くの空いた場所で「右クリック」→「貼り付け」すれば複製され、合計３ファイルできます。

Macの場合は、Finder上でindex.htmlを選択し、Command+Dキーを押すと、ただちにファイルの複製が作成されます。（Windowsと同様にCommand+Cでコピーし、Command+Vで貼り付けても複製できます）

ファイルの名前を変更します。コピーされたファイルを「右クリック」→「名前の変更」でファイル名を変えられます。
それぞれ以下のように info.html と contact.html という名前に変更してください。

• ファイル名は半角英数文字で正確に入力しましょう。日本語入力がOFFの状態で入力するのが安全です。
• 複製されたファイルはindex - コピー.htmlのようにファイル名にスペース文字を含んでいます。ファイル名を修正する際は、末尾にスペースを残さないよう注意しましょう。

  info.html     ← ○ 正しい例
  info .html    ← × 誤り ファイル名の後ろにスペースが一つ残っています。
  imfo.html     ← × 誤り ファイル名が間違っています。
  info,html     ← × 誤り 拡張子のドット「.」がカンマ「,」になっています。

それでは問い合わせページの内容を編集していきましょう。

問い合わせページに該当するcontact.htmlの内容は単純です。今回は学生番号と氏名を記入しておいてください。

例：

学生番号 ○○○○○
氏名　○○○○

contact.htmlをテキストエディタのウインドウ上にドラッグして開き、内容を修正します。

前回のHTMLでは「本文用スペース」に該当する表（<table>）の中にある「中央」と書かれたセル（<td>）の中に記事を収める必要があります。下の例では分かりやすいように「中央」の周囲にスペースを設けています。あなたのHTML内にも同じような場所があるはずなので、探してください。

   <!-- ↓↓↓↓ここから本文用スペース↓↓↓↓ -->
  <table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" ></td>
  <td width="748"            background="main_top.gif"      ></td>
  <td width="16" height="16" background="main_top_right.gif"></td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" ></td>
  <td width="748"                                       >     中央     </td>
  <td width="16"             background="main_right.gif"></td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" ></td>
  <td width="748"            background="main_bottom.gif"      ></td>
  <td width="16" height="16" background="main_bottom_right.gif"></td>
</tr>
</table>
  <!-- ↑↑↑↑ここまで本文用スペース↑↑↑↑ -->

記事を書くべき場所が分かりやすいように、Enterキーを何度か押して、広めの空間を作っておくと良いでしょう。
<td width="748" >と</td>の間に広い空間を作るイメージです。

そして目印にしていた「中央」という文字は、もう必要ないので削除しておきます。

   <!-- ↓↓↓↓ここから本文用スペース↓↓↓↓ -->
  <table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" ></td>
  <td width="748"            background="main_top.gif"      ></td>
  <td width="16" height="16" background="main_top_right.gif"></td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" ></td>
  <td width="748"                                       >
 
 
 
 
 
 
  </td>
  <td width="16"             background="main_right.gif"></td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" ></td>
  <td width="748"            background="main_bottom.gif"      ></td>
  <td width="16" height="16" background="main_bottom_right.gif"></td>
</tr>
</table>
  <!-- ↑↑↑↑ここまで本文用スペース↑↑↑↑ -->

「中央」と書かれていた場所を広げて空間を作りました。

あとは作った空間部分に、問い合わせページの内容である「学生番号」と「氏名」を入力するだけです。

学生番号 ○○○○○<br>
氏名　○○○○<br>

これでcontact.htmlは完成です。簡単ですね。

他のページに記事を書き込むときも同様に、「中央」と書かれたセルの中身を広げ、記事となる文章を記入してください。

続けて、紹介ページの内容を編集していきましょう。

問い合わせページに該当するinfo.htmlの内容は、あなたが気になる最近の流行語、トレンドワードなどをウェブで検索して調べ、それが何なのかを先生に紹介する内容を記入してください。

例： 量子コンピュータ　ＶＲ　４Ｋ　ＳＮＳ　ユビキタス　オンデマンド　自動運転　クラウドファンディング　ＩｏＴ　ＰＳ５

この例はIT関連ワードですが、もちろん異なるジャンルのワードでもＯＫです。自由なテーマで記事を作成してください。

作業工程はcontact.htmlと同様です。

今度は info.htmlをテキストエディタにドラッグして開き、内容を修正します。

上の項と同じように「中央」のセルを広げて空間を作り、記事となる文章を記入してください。

この記事がサイトのメインコンテンツなので、頑張って記事を作りましょう。

具体的には作成例の「紹介ページ」を参考にしてください。

トップページに該当するindex.htmlの内容は、このサイトの内容がどういうものかを説明し、イメージ画像を掲載するなどしてください。
例:「このサイトは○○について解説するサイトです。紹介コーナーで私の気になるトレンドワードを紹介します。」

具体的には作成例を参考にしてください。

作業工程は、やはりcontact.htmlと同様です。

今度は index.htmlをテキストエディタにドラッグして開き、内容を修正します。

上の項と同じように「中央」のセルを広げて空間を作り、記事となる文章を記入してください。

これで全３ページの内容が揃いました。

ページ上部のボタン部分は、各ページへのリンクになっているはずです。

並んでいる３つのリンクを試しにクリックし、それぞれのページに画面が切り替わるかチェックしましょう。動作確認はとても大切です！ かならずチェックしましょう。index.html info.html contact.html それぞれの内容が表示されれば問題ありません。

もし正しく動作しない場合は、リンク<a>が正しく設定されているかチェックしましょう。
index.html をテキストエディタで開くと、以下のような部分があるはずです。この周辺に問題がある可能性が高いです。

<tr>
  <td width="148" height="24" background="tab.gif" align="center"><a href="index.html">トップページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="info.html">紹介ページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="contact.html">問い合わせ</a></td>
  <td width="336" height="24"></td>
</tr>

うまく動かない場合は、以下の点に注意し、間違いがないか確認してください。

• ファイル名は間違っていませんか？
  リンク先が正しく index.html info.html contact.html に設定されていることを確認してください。
  例えば"index .html"や " index.html"のように余分なスペースが入っていたりしないか確認しましょう。
• ３つのHTMLファイルは同じフォルダ内に保存されていますか？
  HTMLの保存場所が異なっていると正しくリンクできません。作業用フォルダの中を確認し、３つのHTMLファイルが同じフォルダ内に存在するか確認しましょう。（もちろん他にも使用した画像ファイルなどがたくさんあるはずです）
  
  もしもファイルをどこに保存したのか分からなくなってしまった場合は、Bracketsの場合「ファイル」メニュー→「最近使用したファイルを開く」に、以前に編集したHTMLファイルが掲載されるので、見つかるはずです。目的のファイルを開き、「ファイル」メニュー→「名前をつけて保存」で、保存場所をあなたの作業フォルダにしっかり指定してから保存し直してください。
• ファイルの実際の名前は異なっていませんか？
  リンク先として指定した index.html info.html contact.html の実際のファイル名が異なっていると正しくアクセスできません。もし指定の名前と異なる場合は、「右クリック」→「名前の変更」でファイルの名前を変えられます。<a>で指定したファイル名と同じになるよう調整してください。
• 他のファイルも同様に修正しましょう
  もし何らかのミスを見つけた場合、３つのHTMLファイルはindex.htmlを複製して作ったので、他の２つのファイルも同様にミスがあるはずです。残りのファイルも改めてテキストエディタで開いて、同じ箇所にミスが無いか確認し、適宜修正しましょう。

正しく動作するようになったら、いよいよ課題の提出です。

前回と今回の２回に分けて作成したサイトに使用するファイルをすべて「圧縮フォルダ」機能を使って圧縮し、moodleにアップロードしてください。

提出期限は、次週の授業日いっぱいまでとします。

圧縮フォルダの作り方が分からない場合はこちらを参考にしてください。

• ３つのHTMLファイル index.html info.html contact.html の他に、画像ファイルも10点以上使用しているはずです。それらを全て忘れずアップロードしてください。

• 作業用フォルダ内にファイルを全て収めている場合は、フォルダを丸ごと圧縮すると手っ取り早いです。ここでは「trend」フォルダ内で作業しているとします。その場合、以下のような操作を行って、フォルダを丸ごと圧縮すると良いでしょう。
  1. 作業用フォルダを開いていることを確認します。必要なHTMLファイルや画像ファイルが存在することを確認します。ウインドウ上部には現在の場所が表示されているので、把握しておきます。
     
     もし「trend」ではない別の名前のフォルダで作業していたとしても、そのままで構いません。「trend」をあなたのフォルダ名に置き換えて、続きの操作を行ってください。
  2. 作業用フォルダの外に出ます。ウインドウ上部にある「↑」ボタンを押すと、フォルダの外に出られます。（Macの場合はCommand+↑キーを押すと同様にフォルダの外に出られます）
     
     
     上の例は、デスクトップ上にある「trend」フォルダ内で作業をしていた状況です。「trend」フォルダの外に出たことでデスクトップに移動し、さっきまで居た「trend」フォルダが見えているというわけです。
  3. 作業用フォルダ（trend）にマウスカーソルを重ねた状態で「右クリック」→「送る」→「圧縮(ZIP形式)フォルダー」を選択します。
     少し待つと圧縮が行われ、zipファイルが作られます。
     
     このように、フォルダを丸ごと圧縮するには、フォルダの外に出てから圧縮する必要があるでしょう。

提出する際は、この圧縮ファイル「trend.zip」をmoodleにアップロードしてください。フォルダ内にあった十数個のファイルが全て含まれています。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

moodleへの課題提出方法が分からない場合は、こちらを参照してください。
moodleに課題をアップロードする方法

以上で今回の作業は終了です。大変おつかれさまでした。

サイトの作成はここで一区切りし、次回からはまた別の内容となります。

次回はCGIと呼ばれるプログラムの取り扱いについて解説します。

戻る