田村仁研究室　日本工業大学創造システム工学科

メニュー

前回までに作成したトップぺージと，自己紹介ページに，自作の外部CSSを読み込ませること．
トップページと自己紹介ページそれぞれに，メニュー部分(同じものでよい)をCSSを使って作成すること
メニューの各項目には，(少なくとも)トップページと自己紹介ページを含めること
上記の機能を含んだ外部CSSファイルを作成し，学生サーバにアップロードしておくこと
(応用課題) フリーのCSSデザインのテンプレートを使ってクールなページデザインに挑戦してみる．

備考

条件を満たさないものは減点する

採点方法

各ページにメニュー部分がある
メニューをクリックするとちゃんとジャンプできる
全ページがCSSに対応

■提出方法■

前回作成したWebページデータを修整し，再アップロードすること．そして外部CSSファイルも追加アップロードすること．手順は次のようになる．

body{
   background-image: url("back.jpg");　※背景画像back.jpgを使用する例
   background-repeat: repeat;
   color: #000080;
   text-align: left;
   margin-top: 0.5cm;
   font-size: 12pt;
}
H1{
   margin-left: 0.5cm;
   font-size: 24pt;
   background-color: #000080;
   color: #0088ff;
   text-align: center;
   font-weight: bold;
}
#page{width:750px;text-align:left;margin:0px auto;}
#header{width:750px;margin:0px 0px 15px 0px;}
#main{float:left;width:590px;}
#menu{float:right;width:150px;padding:0px 0px 0px 10px;}
#footer{clear:both;width:750px;margin:15px 0px 15px 0px;}

上記例のようなCSSファイルをエディタで作成し，s110xxx自分の番号.cssとして保存
全ページ(htmlファイル)の<head>部分に次を追加
<link rel="stylesheet" type="text/css" href="上記のcssファイル名" media="screen">
全ページの<head>部分を次のように分割

<body>

<div id="page">
  <div id="header">
    ここが画面の上部に表示される部分　※省略可能
  </div>
  <div id="main">
    ここが主画面　前回作成した内容と同じものを書き込む
  </div>
  <div id="menu">

    ここがメニュー    「<a href="index.html">トップページ</a>」 とか各ページへのリンク
  </div>
  <div id="footer">
    ここが画面下部　※省略可能
  </div>
</div>

</body>

修正したindex.html, introduction.htmlと自分の学籍番号.cssをsstu.nit.ac.jpへアップロード．
IEを起動して，アドレス「http://sstu.nit.ac.jp/~s11xxxxxx/」(自分のページアドレス)を入力して参照してみる．
思ったように表示されなかったら，最初に戻ってやりなおし

作成したページデータは，自分のUSBメモリまたはネットワークフォルダに保存しておくと自分のノートパソコンやビレッジなどで作業を続行できる．学内からならば，sstuへのアップロードは自由にできる．

締め切り

基本的に演習時間中(次回までに)

遅れて提出する場合、Webページを作成の上、田村まで連絡することただし、その際の採点は低目の評価とする。

コンピュータリテラシー2

Computer Literacy 2

メニュー

目次

課題03-2

Webページの作成(続き)

採点方法

■提出方法■

締め切り