KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/9th/exercise1 の変更点

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

*課題1: HTMLファイルとCSSファイルを作成する [#gcc8b90c]

**課題の内容 [#va214ebd]

HTMLの技術を使って、
前回までに作ったHTMLファイルを更新してください。
-プロフィールのページ
-記事へのコメントのページ

2つのファイル（プロフィールとコメントのページ）に、
統一したスタイルを設定してください。
スタイルファイル（CSSファイル）は1つです。
CSSファイルは、次のとおりとします。
-ファイル名: style.css

今回は、CSSを使って、
COLOR(red):「背景画像」と「レイアウト」
を設定してください。


***背景画像の設定 [#c96b9d96]
body要素やhn(n=1...6)要素に、背景の画像を設定してください。
-[[背景画像の設定>Lecture/InfoDesignB2004/9th/bg_image]]
-[[背景画像の並べ方の設定>Lecture/InfoDesignB2004/9th/bg_repeat]]
-[[背景画像の表示位置の設定>Lecture/InfoDesignB2004/9th/bg_position]]
-[[背景画像の固定>Lecture/InfoDesignB2004/9th/bg_attach]]
-[[背景関係をまとめた設定>Lecture/InfoDesignB2004/9th/background]]

画像は、Yahoo! JAPAN( http://www.yahoo.co.jp/ )で素材集のサイトを検索して、
ダウンロードしたものを使用してください（[[第6回>Lecture/InfoDesignB2004/6th/image#hba34d1b]]を参照）。
なお、使用するときには、''必ずサイトの使用条件と著作権に配慮こと''。
使用条件や著作権の違反行為があった場合は、
COLOR(red):''確認した時点で単位は認めません。''

+Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス
+「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む
+登録されているサイトにアクセスし、画像ファイルを探す
+気に入った画像があったら、画像を右クリックする
++メニューから「名前をつけて画像を保存」を選ぶ
++ファイルの保存場所を指定して、「保存」ボタンをクリック

***レイアウトの設定 [#ka4f2fea]
コメントのページにレイアウトを設定してください。
-[[幅と高さの設定>Lecture/InfoDesignB2004/9th/width_height]]
-[[左右への配置と回り込みの設定>Lecture/InfoDesignB2004/9th/float]]
-[[回り込みの解除>Lecture/InfoDesignB2004/9th/clear]]

div要素を使って、複数の要素をブロック化します。
そのブロックに対して、左右の配置を設定します。

配置は、次のどちらかを参考に、設定をしてください。

-最上部: タイトルとリンク、左: 目次、右: コメントの一覧、最下部: 連絡先
#ref(sample1.png,nolink,レイアウトの例（左: 目次、右: コメントの一覧)
-最上部: タイトルとリンク、左: コメントの一覧、右: 目次、最下部: 連絡先
#ref(sample2.png,nolink,レイアウトの例（左: コメントの一覧、右: 目次)


***前回までの設定 [#l595a342]
前回までの設定は次のとおりです。
-クラスを使った、マージンとまわりの空間の設定
-クラスを使った、リンク分の設定
-クラスを使った、フォントの設定
-クラスを使った、位置揃え
-ページ全体の文字色と背景色（body属性）
-見出しの文字色と背景色（h1〜h6属性）
-属性見出しの枠線の設定（色・太さ・種類）（h1〜h6属性）
-段落内の文章の行間（p属性）

なお、
もし次のような設定をしている場合は、
COLOR(red):必ず、すでに設定されているタグの属性の設定を消しておいてください。
-ページ全体の文字色と背景色
-見出しの文字色と背景色
-見出しの枠線の設定（色・太さ・種類）
-COLOR(red):行揃え

***プロフィールのページ [#p7ae642e]
-作成したCSSファイルを指定するように、設定してください。
-「連絡先」にある「更新日」を更新した日付にする

***記事へのコメントのページ [#y3694ea6]
内容は、次のとおりです。
-前回の課題(1)で作成したHTMLファイルに、前回の課題(2)の記事へのコメントを追加
-今回までに紹介した、HTMLの技術を使って、ファイルを編集
-HTMLファイルの文法をチェックするサイトの、チェックを合格する

ファイルの内容は、次のようにしてください。
#pre(novervatim){{
ページのタイトル

  プロフィール

目次
  各記事へのリンク
  ...
---
第8回の課題：記事へのコメント
...
第7回の課題：記事へのコメント
...
第6回の課題：記事へのコメント
...
第5回の課題：記事へのコメント
...
...
---
連絡先の情報
</pre>
}}

ファイル作成の注意点は、次のとおりです。
-作成したCSSファイルを指定するように、設定してください。
-「連絡先」にある「更新日」を更新した日付にする
-画像データを使ってもかわまない（著作権を違反しないこと！）
-これまでの注意点・ポイント
--[[第4回の注意点>Lecture/InfoDesignB2004/4th/exercise1]]
--[[第5回のポイント>Lecture/InfoDesignB2004/5th/review]]
--[[第6回の注意点>Lecture/InfoDesignB2004/5th/exercise1]]


**HTMLの文法をチェックする [#q061561f]
作成したファイルの、HTMLの文法が正しいかを、
次のサイトにアクセスして、チェックしてください。
-[[Another HTML-lint gateway:http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html]] ( http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html )

チェックは、次のような方法で行ってください。
+http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html へアクセス
+「FILE」のチェックボックスをクリック
+「参照」ボタンをクリック
+ファイルの選択画面になるので、作成したファイルを選択し、「開く」ボタンをクリック
+「チェック」ボタンをクリック
+チェック結果が表示

チェック結果が、COLOR(red):「よくできました」COLOR(black):となるまで、
文法の間違いを修正して、チェックを繰り返してください。

COLOR(red):「よくできました」COLOR(black):となったら、
課題のファイルを提出してください。

**提出方法 [#v01b1b2c]
提出方法は、「''ファイルのWebサーバへの転送''」です。
ファイルの転送方法は、
[[第6回の説明「ファイルを転送する」>Lecture/InfoDesignB2004/6th/ftp]]を
よく読んで、
操作してください。
転送するファイルは、次のとおりです。
-プロフィールのページ
-コメントのページ
-COLOR(red):スタイルシート
-COLOR(red):使用している画像ファイル

転送したファイルは、次のURLで確認できます。
-http://arena.hyogo-dai.ac.jp/student/2004/idb/

転送が完了したら、次のメールを送ってください。
-宛先: kawano@ed.hyogo-dai.ac.jp
-件名: 第9回の課題(1)
-本文: 今回までの感想を簡単に書いてください。



**提出期限 [#m2c1298d]
-原則として、''平成16年12月10日午後2時''までとします。
-期限以後は、特別な理由がない限り、提出を受け付けません。

&br;
&navi2(Lecture/InfoDesignB2004/9th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/9th,prev,toc,next)

}}