KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/8th/exercise1 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2005/8th/exercise1 へ行く。

*課題: ネット上の記事へのコメントをHTMLファイルにする [#sf2c56aa]

前回と同様に、HTMLファイルを作成していきます。
HTMLファイルの内容は、
''「インターネット上のニュースへのコメント」''
とします。

#contents


**インターネット上の記事にコメントをする [#s8314b39]
***1.情報を集める [#h98cf362]
自分が現在興味のあるテーマについて、
インターネットからニュース等を探して、
''自分が興味を持った記事を1つ集めなさい''。

やり方は、第3回の課題と同じです。
[[第3回の課題の説明>Lecture/InfoDesignB2005/3rd/exercise1#q6e65094]]を見てください。

***2.情報にコメントをつける [#h1f14df0]
記事を探したら、次の順にコメントを作りなさい。
なお、文字数は、''「100〜150文字程度」''としますが、
内容はささいなことでかまいません。

やり方は、第3回の課題と同じです。
[[第3回の課題の説明>Lecture/InfoDesignB2005/3rd/exercise1#a01eab99]]を見てください。


**HTMLファイルの作成 [#x477f21a]
前回までの課題で作成したファイルをもとに、
今回の課題を作成します。

***コメントの追加・目次の更新 [#p656bfbf]
次のようなレイアウトになるように、
今回作ったコメントを追加して、目次の部分を更新します。
第2回〜第4回までの、HTMLの技術を使って、作成してください。

#pre(novervatim){{
ページのタイトル

目次
　・第8回のコメントへのリンク
　・第7回のコメントへのリンク
　・第6回のコメントへのリンク
　・第4回のコメントへのリンク
　・第3回のコメントへのリンク
　・第2回のコメントへのリンク
　・プロフィール

---
第8回の課題のコメント
...
[トップへ戻る]

第7回の課題のコメント
...
[トップへ戻る]

第6回の課題のコメント
...
[トップへ戻る]

第4回の課題のコメント
...
[トップへ戻る]

第3回の課題のコメント
...
[トップへ戻る]

第2回の課題のコメント
...
[トップへ戻る]

プロフィール
...
[トップへ戻る]

---
連絡先・著作権の情報
</pre>
}}

作成するときの注意点は、次のとおりです。
-コメントを作る
--それぞれのコメントの最後には、ページのトップ（一番上）にジャンプする「トップへ戻る」というリンクを作る
-目次を更新する
--6つのコメント（第2〜4、6〜8回）へジャンプできるリンクをつくる
-[[第3回の課題で説明した注意点>Lecture/InfoDesignB2005/4th/exercise1#n5e1c11f]]を守る
-ファイルの最後にある、連絡先の「更新日」の日付を更新する
#pre(novervatim){{
<address>
 作成日: 2005-10-14; 更新日: &color(red){2005-12-02};<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ファイルの作成 [#gf08e6c1]
コメントが書かれたHTMLファイルに、スタイルを設定します。

今回は、HTMLファイルとは別に、
スタイルシートの設定が書かれたCSSファイルを作成します。
ファイル名は、次のとおりとします。
-ファイル名: style.css

CSSを使って、HTMLファイルの各要素に次のような設定をしてください。
-今回:&color(red){body要素やhn(n=1...6)要素への背景の画像の設定};
--背景画像の設定 
--背景画像の並べ方の設定 
--背景画像の表示位置の設定 
--背景画像の固定 
-前回:「クラス」を使った設定をする
--マージンや周りの空間の設定（margin, padding）
--リンク部分の設定
--フォントの設定
--位置そろえ
-前々回分
--ページ全体の文字色と背景色（body要素）
--見出しの文字色と背景色（h1〜h6要素）
--見出しの枠線の設定（色・太さ・種類）（h1〜h6要素）
--段落内の文章の行間（p要素）

ただし、
もし次のな設定をしている場合は、
COLOR(red):必ず、該当する属性の設定を消してください！
-ページ全体の文字色と背景色
-見出しの文字色と背景色
-見出しの枠線の設定（色・太さ・種類）
-&color(red){行揃え};



&color(red){まだ提出ではありません};。
&navi2(Lecture/InfoDesignB2005/8th,next);進んで、次の課題に進んでください。


&br;
----
#navi2(Lecture/InfoDesignB2005/8th,prev,toc,next)

}}