Gattyan

PHOTO ALBUM

授業記録課題

昨日途中まで作って今日まで持ち越すのもなんなので、完成させました。
まだfloatの段組みで時間かかっちゃうかなぁ。
※一部修正しました。contentページのサイドバーのバックのカラーを指定し忘れていたのと、コンテンツのソースの順番を「nabigation⇒写真⇒田舎の風景」から「田舎の風景⇒写真⇒nabigation」に変更しました。文字の配列を考えてなく、見たままのレイアウトをしていました。

http://kikin.han-be.com/photo_album/home.html←確認ページ

menuページソース

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>PHOTO ALBUM</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body, textarea {
  font-family:"メイリオ" , "ＭＳ Ｐゴシック" , sans-serif;
}
body {
 background-color: #fff;
}
#container {
 width:800px;
 height:auto;
 margin:40px auto;
 background-color:#fff;
}
#nav {
 width:800px;
 height:45px;
 background-image: url(images/top/btn_bg.jpg);
 background-repeat:repeat-x;
}
ul {
 list-style-type: none;
 margin-left:10px;
}
li {
 float: left;
 display:inline;
}
li a {
 display:block;
 width:130px;
 height:45px;
}
#content {
 width:800px;
 height:399px;
 background-image:url(images/contents/bk_maincontents.jpg);
}
p.text {
  float:left;
  font-size:0.75em;
  margin:20px 0 0 20px;
  width:460px;	
}
p.view {
  float:left;
  display:inline;
  width:440px;
  height:360px;
}
p.camera {
  float:left;
  display:inline;
  width:320px;
  height:379px;
  margin:20px 0px 0 0px;
}
img.view1 {
  margin:30px 20px 0 0;
}
img.view3 {
  margin:20px 20px 0 0;
}
#footer {
 width: 800px;
 height:30px;
 background-color: #1874cd;
}
address {
 font-size:0.875em;
 color:#fff;
 font-style:normal;
 text-align:center;
 padding:5px 0;
}
</style>
</head>
<body>
<div id="container">
<h1><img src="images/top/title.jpg"width="800" height="85" alt="title" /></h1>
<div id="nav">
<ul>
<li><a href="home.html"><img src="images/top/btn01.jpg" width="130" height="45" alt="home" class="home" onMouseOver="this.src='images/top/btn01o.jpg'" onMouseOut="this.src='images/top/btn01.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn02.jpg" width="130" height="45" alt="home" onMouseOver="this.src='images/top/btn02o.jpg'" onMouseOut="this.src='images/top/btn02.jpg'" /></a></li>
 <li><a href="content.html"><img src="images/top/btn03.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn03o.jpg'" onMouseOut="this.src='images/top/btn03.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn04.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn04o.jpg'" onMouseOut="this.src='images/top/btn04.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn05.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn05o.jpg'" onMouseOut="this.src='images/top/btn05.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn06.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn06o.jpg'" onMouseOut="this.src='images/top/btn06.jpg'" /></a></li>
</ul>
</div>
<div id="content">
<p class="text">ホントに何気ない日常なんだけど、ファインダーを通すと違った世界が現れる。<br />気の向くまま徒然に撮ったプライベートフォトアルバムへようこそ。<img src="images/top/photo01s.jpg" width="204" height="137" alt="#" class="view1" /><img src="images/top/photo02s.jpg" width="204" height="137" alt="#" class="view2" /><img src="images/top/photo03s.jpg" width="204" height="137" alt="#" class="view3" /><img src="images/top/photo04s.jpg" width="204" height="137" alt="#" class="view4" /></p>
<p class="camera"><img src="images/top/bg_wrapimg.jpg" width="309" height="378" alt="#" /></p>
</div>
<div id="footer">
<address>COPYRIGHT(C) 2008 MY PHOTO ALBUM ALL RIGHTS RESERVED.</address>
</div>
</div>
</body>
</html>

contentページソース

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>PHOTO ALBUM</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body, textarea {
  font-family:"メイリオ" , "ＭＳ Ｐゴシック" , sans-serif;
}
img {
  border-none;
}
a {
  text-decoration:none;
}
body {
 background-color: #fff;
}
#container {
 width:800px;
 height:auto;
 margin:40px auto;
 background-color:#fff;
}
#nav {
 width:800px;
 height:45px;
 background-image: url(images/top/btn_bg.jpg);
 background-repeat:repeat-x;
}
#nav ul {
 list-style-type: none;
 margin-left:10px;
}
#nav li {
 float: left;
 display:inline;
}
#nav li a {
 display:block;
 width:130px;
 height:45px;
}
#content {
 width:800px;
 height:399px;
 background-image:url(images/contents/bk_maincontents.jpg);
}
#left {
  float:left;
  width:131px;
  height:399px;
  margin-left:9px;
  background-image:url(images/contents/title_navi.jpg);
  background-repeat:no-repeat;
  background-position:center 20px;
  background-color:#3399ff;
}
ul.menu {
  width:130px;
  margin-left:10px;
  padding-top:45px;
  list-style-type:none;
}
.menu li { 
  margin-bottom:5px;
}
.menu li a {
  display:block;
}
#center {
  float:right;
  width:390px;
  height:399px;
  margin-left:0px;
}
#center p.photo {
  margin-top:20px;
}
a.before {
  font-size:0.9em;
}
a.next {
  font-size:0.9em;
  margin-left:210px;
}
.view {
  margin-top:10px;
}
.view1 {
  margin-right:12px;
}
.view2 {
  margin-right:12px;
}
#right {
  float:right;
  width:250px;
  height:399px;
  
}
h2 {
  text-align:center;
  font-size:1.3em;
  margin: 10px 0 0px 0;
}
dt {
  text-align:center;
  margin-bottom:5px;
}
dd {
  font-size:0.9em;
  width:230px;
}
#footer {
 clear:both;
 width: 800px;
 height:30px;
 background-color: #1874cd;
}
address {
 font-size:0.875em;
 color:#fff;
 font-style:normal;
 text-align:center;
 padding:5px 0;
}
</style>
</head>
<body>
<div id="container">
<h1><img src="images/contents/title.jpg"width="800" height="85" alt="title" /></h1>
<div id="nav">
<ul>
<li><a href="home.html"><img src="images/top/btn01.jpg" width="130" height="45" alt="home" class="home"
 onMouseOver="this.src='images/top/btn01o.jpg'"   onMouseOut="this.src='images/top/btn01.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn02.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn02o.jpg'" onMouseOut="this.src='images/top/btn02.jpg'" /></a></li>
 <li><a href="content.html"><img src="images/top/btn03.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn03o.jpg'" onMouseOut="this.src='images/top/btn03.jpg'" /></a></li>
　<li><a href="#"><img src="images/top/btn04.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn04o.jpg'" onMouseOut="this.src='images/top/btn04.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn05.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn05o.jpg'" onMouseOut="this.src='images/top/btn05.jpg'" /></a></li>
 <li><a href="#"><img src="images/top/btn06.jpg" width="130" height="45" alt="home"
 onMouseOver="this.src='images/top/btn06o.jpg'"  onMouseOut="this.src='images/top/btn06.jpg'" /></a></li>
</ul>
</div>
<div id="content">
<div id="right">
<h2>田舎の風景</h2>
<dl>
<dt>2008/5/3</dt>
<dd>日常の忙しさをちょっとだけ忘れたくて、ゴールデンウィーク休暇は田舎に帰省してきた。田舎は何も変わってない。</dd>
</dl>
</div>
<div id="center">
<p class="photo"><img src="images/contents/photo01.jpg" width="376" height="251" alt="center_photo" /></p>
<p><a href="#" class="before">&gt;前のフォト</a><a href="#" class="next">次のフォト&gt;</a></p>
 <p class="view"><img src="images/contents/photo02.jpg" width="118" height="78" class="view1" alt="#" /><img src="images/contents/photo03.jpg"  width="117" height="78" class="view2" alt="#" /><img src="images/contents/photo03.jpg" width="117" height="78" class="view3" alt="#" /></p>
</div>
<div id="left">
<ul class="menu">
<li><a href="#">■田舎の風景</a></li>
<li><a href="#">■花火大会</a></li>
<li><a href="#">■愛車自慢</a></li>
</ul>
</div>
</div>
<div id="footer">
<address>COPYRIGHT(C) 2008 MY PHOTO ALBUM ALL RIGHTS RESERVED.</address>
</div>
</div>
</body>
</html>