トップへ
田村研究室

情報処理演習1

2009年度

メニュー

目次

2009
5/11

課題03(CSSとページデザイン)

問題

次の要件を満たすような各自自分のWebページを作成せよ

  1. 自分用の外部CSSファイルを作成しアップロードしておくこと
  2. 前回までに作成したトップぺージと，自己紹介ページに，その外部CSSを読み込ませること．
  3. トップページと自己紹介ページそれぞれに，メニュー部分(同じものでよい)をCSSを使って作成すること
  4. メニューの各項目には，(少なくとも)トップページと自己紹介ページを含めること

備考

  • 条件を満たさないものは減点する
  • フリーのCSSデザインをダウンロードして使用しても構わない．(利用条件には注意すること)

採点方法

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

提出方法

手順は次のようになる．

body{
   background-image: url("back.jpg");　※背景画像back.jpgを使用する例
   background-repead: 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;}
  1. 上記例のようなCSSファイルをエディタで作成し，自分の学籍番号.cssとして保存
  2. 全ページ(htmlファイル)の<head>部分に次を追加
    <link rel="stylesheet" type="text/css" href="c1085xxx.css" media="screen">
  3. 全ページの<head>部分を次のように分割
    4. <body>
<div id="page">
  <div id="header">
    ここが画面の上部に表示される部分　※必要があれば(省略可能)
  </div>
  <div id="main">
    ここが主画面　課題2で作成した内容と同じものを書き込む
  </div>
  <div id="menu">
    ここがメニュー    「<a href="index.html">トップページ」 とか各ページへのリンク
  </div>
  <div id="footer">
    ここが画面下部　※必要があれば(省略可能)
  </div>
</div>
</body>
  4. 修正したindex.html, introduction.htmlと自分の学籍番号.cssをjwwwに保存．
  5. 学内向け公開設定
  6. 思ったように表示されなかったら，最初に戻ってやりなおし

■締め切り■

  • 次回演習開始まで(時間中に採点します)