課題番号



課題番号
課題内容

以下のことを書きなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080512_075001.html)

1)今日の学習内容を整理して書きなさい.
2)今日の授業の感想を書きなさい.

上のことを書くときには,本日,学習した機能を使って書きなさい.つまり,次の機能をすべて使いなさい.

  1. 改段落と改行
  2. 見出しの設定
  3. 段落に行揃えを設定
  4. 段落にインデントを設定
  5. リスト
  6. 番号リスト
  7. 太字・斜体の設定
  8. フォントサイズの設定
  9. フォント設定
  10. フォントの色の設定
  11. 日付の挿入
  12. 特殊文字の挿入

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら先生に言いに来ること.以上.

以下のことを書きなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080519_075001.html)

1)今日の学習内容を整理して書きなさい.
2)今日の授業の感想を書きなさい.

上のことを書くときには,本日,学習した機能を使って書きなさい.つまり,次の機能をすべて使いなさい.

  1. テーブルを挿入する(p.90)
  2. セルに文字を入力する(p.94)
  3. セルに画像を挿入する(p.95)
      (可能ならばやってみる.ファイルパネルから画像ファイルをドラグ&ドロップすると出来る)
  4. テーブルのサイズを変更する(p.96)
  5. 行の高さを変更する(p.96)
  6. 列の幅を変更する(p.96)
  7. すべての列幅を固定する(p.97)
  8. セルの中の文字を中央揃えにする(p.99)
  9. 行および列を挿入する(p.100)
  10. セルを結合する(p.104)
  11. 罫線の色を設定する(p.106)
  12. テーブルおよびセルの背景色を設定する(p.107)
  13. セル間隔を変更する(p.109)
  14. セル余白を変更する(p.110)
  15. 一般的なテーブルを作りなさい(p.111)
  16. セルの中に余裕があるテーブルを作りなさい(p.111)
  17. 細い罫線のテーブルを作りなさい(p.111)
  18. レイアウト用のテーブル1を作りなさい(p.112)
  19. レイアウト用のテーブル2を作りなさい(p.112)
  20. ブラウザのウィンドウサイズに合せて自動伸縮するテーブルを作りなさい(p.113)
  21. 画像を挿入しなさい(p.115の方法)または(p.117のファイルパネルから画像を挿入する方法でも良い)
  22. イメージのアクセシビリティ属性を設定しなさい(p.116)
  23. 画像について,サイズ変更,横位置変更,移動をしなさい(pp.119-121)
  24. 画像と文字との位置関係で,行揃えをしなさい(p.122)
  25. 文字の回りこみを設定しなさい(p.122)
  26. 画像のマージンを設定しなさい(p.123)

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

以下のことをしなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080526_075001.html)

第8章 
Part 1:リンクの作成

1. サイト内へのリンクを作成しなさい.(p.128)
  ①文字にリンクを作成しなさい.(p.128)
  ②画像にリンクを作成しなさい.(p.129)
2. 外部サイトへのリンクを作成しなさい(p.132)
3. メールアドレスへのリンクを作成しなさい(p.133)
4. リンクの変更・削除をしなさい(p.134)

Part 2:区切り線の挿入

5. 区切り線を挿入しなさい(p.136)
6. 区切り線の書式設定をしなさい(p.137)

今日の授業の感想を書きなさい.書く場所は,今日,作ったWebページの最後に書きなさい.

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

以下のことをしなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080601_075001.html)

第10
Part 1:サイトとWebページの設定

7. サイトの定義をしなさい(p.150)
8. Web頁の設定をしなさい(p.152)

Part 3:CSSスタイルを利用したブロックの作成

9. IDセレクタを使用したコンテンツ用ブロックの作成をしなさい(p.160)
10. アセットを使用した画像の挿入をしなさい(p.163)
11. IDセレクタを使用したメニュー用ブロックの作成をしなさい(p.166)
12. クラスセレクタを使用した本文用ブロックの作成をしなさい(p.169)
13. ブロックの選択(p.171)・クラスセレクタの適用(p.173)をしなさい

Part 4:CSSスタイルの作成・適用・変更

14. IDセレクタによるCSSスタイルの作成をしなさい(p.174)
15. IDセレクタによるCSSスタイルを適用しなさい(p.176)
16. クラスセレクタによるCSSスタイルの作成をしなさい(p.178)
17. クラスセレクタによるCSSスタイルを適用しなさい(p.179)

今日の授業の感想を書きなさい.書く場所は,今日,作ったWebページの最後に書きなさい.

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

以下のことをしなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080609_075001.html)

第11章  <レイアウト2> テーブルを利用したWebページを作成しよう
Part1:テーブルを利用したWebレイアウト

1. 外部スタイルシートへのリンクを貼りなさい.(p.197)
   (参考: CS3で,外部スタイルシートを作る手順)
2. 外枠用のテーブルを作成しなさい.(p.198)
3. 本文のレイアウト用のテーブルを作成しなさい.(p.200)
4. スペーサーイメージを挿入しなさい.( p.201)

Part2:テーブル利用のテクニック

5. セルに対する画像の縦位置の調整をしなさい.(p.203)
6. 細線(1ピクセル)の枠線の作成をしなさい.( p.204)
7. 横幅を指定しないテーブルを作成しなさい.(p.206)
8. リンクしたCSSスタイルの使用をしなさい.( p.206)

今日の授業の感想を書きなさい.書く場所は,今日,作ったWebページの最後に書きなさい.

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

以下のことをしなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080616_075001.html)

第14章  <レイアウト5> フレームページを利用したWebレイアウトを作成しよう
Part3:フレームを利用したWebレイアウト

1. p.284 フレームセットを作成しなさい.
2. p.285 フレームセットの設定をしなさい.
3. p.288 フレームの設定をしなさい.
4. p.289 下部左側のフレームの内容を入力しなさい.
5. p.290 下部右側のフレームの内容を入力すなさい.
6. p.292 他のフレームへのリンクの設定をしなさい.

今日の授業の感想を書きなさい.書く場所は,今日,作ったWebページの最後に書きなさい.

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

目的:Form機能を使ってみる

[注] 何人もの人が一度に,特定のコンピュータに集中して,転送を実行すると,コンピュータが処理しきれない場合が有ります.授業中にダウンロードするときは,適当な時間間隔をおいて実行して下さい.

1)Formを処理するプログラムファイル(myFormMail.cgi)をコピーする.
(Winodws Vistaの場合)

  1. ネットワーク → fs→ home2→ public → 木本 → 2年前期情報デザイン論
  2. フォルダ「情報デザイン論」の中のファイル(myFormMail.cgi)を各自のパソコンのマイドキュメントにコピーする
  3. 以上の作業が終わったら,速やかに,開いているウィンドウを閉じる

2)Form機能を利用するWebページ(form.html)を作成する.

  1. Webページ(form.html)を作成する(教科書 第16章を参照のこと)
  2. form.htmlは修正する必要が有ります.修正を指示するので,各自が作成する form.htmlを修正指示に従って修正すること.→ form.htmlの修正事項

 [注] 修正にあたっては,Dreamweaverの画面をコードビューに切り替えてコードを見ながら修正すること.

3)作成したファイルを芸工のWebサーバへUploadする

  1. Uploadするファイル: form.html と myFormMail.cgiです,  myFormMail.cgiの中身はここです
  2. myFormMail.cgiファイルの $mailto = ‘ kimoto@sda.nagoya-cu.ac.jp ’; のメールアドレス部分を自分のメールアドレスに変更してみると,自分のメールアドレスに,このcgiからメールが届く.最初は先生のアドレスに送信して,そのあと,変更して自分のアドレスにも送ること.携帯のメールアドレスでも可.
    以下も可です.つまり,1行で2つのメールアドレスを書けます.
    $mailto = 'kimoto@sda.nagoya-cu.ac.jp,haruo.kimoto2@docomo.ne.jp';
  3. Upload先:  各自のホームディレクトリの中のwwwフォルダ
    例: /home/www/docs/ad05m01 (ad05m01の場合)
  4. まず,form.htmlをアップロードして下さい.
  5. 次に,myFormMail.cgiをアップロードしますが,このときは次のようにしてからアップロードして下さい.
    WinSCPを使ってアップロードして下さい.WinSCPを使ってアップロードする方法 → ここに書いてある.

4)Form機能を利用するWebページ(form.html)にアクセスして使ってみる
 
次のurlにアクセスすると,Form機能を利用するWebページが現れる.
  例: http://www.sda.nagoya-cu.ac.jp/oe07m10/form.html  (oe07m10 の学生の場合)
 ただし,この学生のページで送信ボタンを押すとエラーになる.
 自分のページでは,上記の指示どおりにやっているとエラーにはならないハズ!

 以下のことをしなさい.

  1. Formの各項目に入力する(お名前の欄に学籍番号と氏名を入力する,テキストフィールドには今日の授業の感想を書くこと.その他は,自由に記入のこと)
  2. 入力が終わったら,送信ボタンをクリックして送信する.
  3. 新しいWebページが開く.その内容は,お礼のメッセージである.
  4. 最初に,myFormMail.cgiに先生のメールアドレス(kimoto@sda.nagoya-cu.ac.jp))を書いて,そこに送信しなさい.
  5. 次に,自分のメールアドレス(携帯でも可)に送信されるようにmyFormMail.cgiを修正して自分宛にメールを送信して,受信を確認しなさい.

5)以上が完了したら,手を上げて,声を出して,先生を呼ぶこと.

目的:ビヘイビアを使ってみる,それから,イメージマップを作ってみる

以下のことをしなさい.書くときのファイル名は,今日の日付と各自の学籍番号をつなげたものとしなさい.(例:20080630_075001.html)

第17章   その他の機能(ビヘイビア,イメージマップ)をマスターしよう

1. p.329-p.331 ロールオーバーイメージを作成しなさい.
2. p.331-p.333 ブラウザウィンドウを作成しなさい.
3. p.334-p.339 イメージマップを作りなさい.

今日の授業の感想を書きなさい.書く場所は,今日,作ったindex.htmlのロールオーバーイメージの下に書きなさい.

書いたら,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら手を挙げて,先生に確認してもらうこと.以上.

目的:見る人に分かりやすいホームページを作る

以下の,課題Aまたは課題Bのどちらかを選択して,ホームページを制作して公開しなさい.

課題A:日本の伝統文様の画像コレクション100枚(画像データ)が有ります.
     この100枚の画像コレクションを見やすく整理してホームページを作って公開しなさい.

課題B:世界の民俗人形 小池千枝コレクション300枚(画像データ)が有ります.
     この300枚の画像コレクションの中から100枚を自由に選んで,
     見やすく整理してホームページを作って公開しなさい.

画像コレクションは次の場所に有ります.
1) 「ネットワーク」→「FS」→「home2」→「ReportFolder」→「From Teacher」→「kimoto」
   →「2年前期 情報デザイン論」→「日本の伝統文様

2) 「ネットワーク」→「FS」→「home2」→「ReportFolder」→「From Teacher」→「kimoto」
   →「2年前期 情報デザイン論」→「世界の民俗人形 小池千枝コレクション

ホームページ作成にあたっては,次の点に留意しなさい.

1)画像コレクションを見やすくするためには,分類したり,分類を階層的に構成したりすると,コレクションを見やすく,また,分かりやすく整理できます.あるいは,画像の大きさを大中小に段階別にして,メリハリを付けることも有効です.

  この分類,構成,メリハリ付けは,各自が(独自に)考えて下さい.分類,階層構成,メリハリ付けのしかたは,いろいろな視点があります.例えば,たとえば,描かれている題材について,自然物/人工物,植物/動物,季節,風俗習慣 ,古いものと新しいものなどいろいろな視点が考えられますが,これらの視点は各自が独自に考えてください.分類のための用語や説明なども自分で考えてください

  最終目的は,ユーザができるだけ,迷わないで,無駄のないWeb閲覧をできることです.

なお,各自の画像コレクションの構成方法を考えて,以下のWebページのフォームに入力して,先生に送信しなさい.2012年7月31日(火)午後5時までに送信しなさい.この時に,課題Aまたは課題Bのどちらを選んだのかも併せて書きなさい.

http://www.sda.nagoya-cu.ac.jp/kimoto/perl_ex/ensyu/myFormMail.html

2)日本の伝統文様の場合は,各画像についての簡単な説明(→こちら)が有ります.
   分類や説明などのために使用してください.
  世界の民俗人形 小池千枝コレクションの場合は,説明は有りませんが,
   各自で説明を考えて付けて下さい.なお,説明がどうしても思いつかない場合は,無しでも良いです.

3)サイトの定義は,今までは,penguinlifeやtestsiteでしたが,今回は,imagesとしてください.

4)ホームページのTopページの名前は,image.htmlとしてください.

5)ホームページに今回の課題制作の感想を書きなさい.
 
書く場所は,各自が作ったホームページのTopページの下の部分に書きなさい.

6)ホームページができたら,,芸工Webサーバーにアップロードしなさい.アップロード先は,各自のWebサーバー上のフォルダです(つまり,サイト定義のときに設定したリモートコンピュータのフォルダ).アップロードしたら,自分でWeb閲覧できることを確認しなさい.確認できたら成績評価用課題として先生に確認してもらうこと.確認する日時・場所は授業中に指示します.以上.