*課題: ネット上の記事へのコメントをHTMLファイルにする [#be0dc49c] 前回と同様に、HTMLファイルを作成していきます。 HTMLファイルの内容は、 ''「インターネット上のニュースへのコメント」'' とします。 #contents **インターネット上の記事にコメントをする [#e29a13ad] ***1.情報を集める [#q6e65094] 自分が現在興味のあるテーマについて、 インターネットからニュース等を探して、 ''自分が興味を持った記事を1つ集めなさい''。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>Lecture/InfoDesignB2005/3rd/exercise1#q6e65094]]を見てください。 ***2.情報にコメントをつける [#a01eab99] 記事を探したら、次の順にコメントを作りなさい。 なお、文字数は、''「100〜150文字程度」''としますが、 内容はささいなことでかまいません。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>Lecture/InfoDesignB2005/3rd/exercise1#a01eab99]]を見てください。 **HTMLファイルの作成 [#n5e1c11f] 第6回の課題で作成したファイルをもとに、 今回の課題を作成します。 ***コメントの追加・目次の更新 [#i6abd85d] 次のようなレイアウトになるように、 今回作ったコメントを追加して、目次の部分を更新します。 第2回〜第4回までの、HTMLの技術を使って、作成してください。 #pre(novervatim){{ ページのタイトル 目次 ・第7回のコメントへのリンク ・第6回のコメントへのリンク ・第4回のコメントへのリンク ・第3回のコメントへのリンク ・第2回のコメントへのリンク ・プロフィール --- 第7回の課題のコメント ... [トップへ戻る] 第6回の課題のコメント ... [トップへ戻る] 第4回の課題のコメント ... [トップへ戻る] 第3回の課題のコメント ... [トップへ戻る] 第2回の課題のコメント ... [トップへ戻る] プロフィール ... [トップへ戻る] --- 連絡先・著作権の情報 </pre> }} 作成するときの注意点は、次のとおりです。 -コメントを作る --それぞれのコメントの最後には、ページのトップ(一番上)にジャンプする「トップへ戻る」というリンクを作る -目次を更新する --4つのコメント(第2〜4、6〜7回)へジャンプできるリンクをつくる -[[第3回の課題で説明した注意点>Lecture/InfoDesignB2005/4th/exercise1#n5e1c11f]]を守る -ファイルの最後にある、連絡先の「更新日」の日付を更新する #pre(novervatim){{ <address> 作成日: 2005-10-14; 更新日: &color(red){2005-11-25};<br> Copyright (C) 2005 兵庫太郎, All rights reserved.<br> このページに関する問合せ先:<br> E-Mail. <a href="mailto:e2041000@ed.hyogo-dai.ac.jp"> e2041000@ed.hyogo-dai.ac.jp</a> </address> </pre> }} その他の注意点は、[[第4回の課題>Lecture/InfoDesignB2005/4th/exercise1#i6abd85d]]の説明を見てください。 **CSSファイルの作成 [#ya26744d] コメントが書かれたHTMLファイルに、スタイルを設定します。 今回は、HTMLファイルとは別に、 スタイルシートの設定が書かれたCSSファイルを作成します。 ファイル名は、次のとおりとします。 -ファイル名: style.css CSSを使って、HTMLファイルの各要素に次のような設定をしてください。 -今回分:&color(red){「クラス」を使った設定をする}; --マージンや周りの空間の設定(margin, padding) --リンク部分の設定 --フォントの設定 --位置そろえ -前回分 --ページ全体の文字色と背景色(body要素) --見出しの文字色と背景色(h1〜h6要素) --見出しの枠線の設定(色・太さ・種類)(h1〜h6要素) --段落内の文章の行間(p要素) ただし、 もし次のな設定をしている場合は、 COLOR(red):必ず、該当する属性の設定を消してください! -ページ全体の文字色と背景色 -見出しの文字色と背景色 -見出しの枠線の設定(色・太さ・種類) -&color(red){行揃え}; サンプルのイメージがありますので、下のリンクを参考にしてください。 -&ref(css00.png,noimg,《ページのイメージ》); -&ref(css01.png,noimg,《HTMLファイル(一部分)のイメージ》); -&ref(css02.png,noimg,《CSSファイル(一部分)のイメージ》); &color(red){まだ提出ではありません};。 &navi2(Lecture/InfoDesignB2005/7th,next);進んで、次の課題に進んでください。 &br; ---- #navi2(Lecture/InfoDesignB2005/7th,prev,toc,next) }} |