*課題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) }} |