简单静态网页的设计

总体思路：先构思好一个图书馆的框架

以这个框架为主体，进行拓展，丰富其他内容：

只是简单地做了四个页面，“我的图书馆”页面可以采用同样的方式编写出来。

主体的编程：

#picture{height:470px; margin:0px;}

#label{background-color:#CEDDEC； height:30px;}

</style>
</head>

<div id="picture"><img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/></div>
<div id="label">
<table width="1500" border="1">
<tbody>
<tr>
<td width="50" height="30" align="center"><a href="#"><font color="blue">首页</a></td>
<td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
<td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
<td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
<td width="50" align="center"><a href="#">我的图书馆</a></td>
</tr>
</tbody>
</table>
</div>

</div>
</body>

</html>

拓展内容：

(1)页面“首页”程序代码：

</html>

(2)页面“资源”程序代码：

</html>

(3)页面“服务”程序代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上海图书馆</title>
<style type="text/css">
*{margin:0; padding:0;}
body{background-color:#CCC;}
.clear{clear:both;}

#container{
background-color:#F0BBBC;
height:510px;
width:1500px;
margin:auto;}
#container2{
background-color:#E6ECCC;
width:1500px;
height:820px;
margin:20px auto;
}

#picture{height:470px; margin:0px;}

#label{background-color:#CEDDEC； height:30px;}

#head1{
background-color:blue;
height:30px;
margin:0px 0px 10px 0px;
}
#head2{
background-color:#FBB9B9;
height:270px;
}
#head3{height:20px;}
#head4{
background-color:#B9EBF3;
height:405px;
}
#head5{height:45px;}
#head6{
background-color:#F1C93C;
height:30px;
}
#head7{height:60px;}

#table{
background-color:#A4F4DC;
height:760px;
}
a:link {
color: #070707;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #070707;
}
a:hover {
text-decoration: none;
color: #94CB79;
}
a:active {
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<div id="picture">
<img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/> </div>
<div id="label">
<table width="1500" border="1">
<tbody>
<tr>
<td width="50" height="30" align="center"><a href="Untitled-1.html">首页</a></td>
<td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
<td width="50" align="center"><a href="#"><font color="blue">服务</font></a></td>
<td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
<td width="50" align="center"><a href="#">我的图书馆</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="container2">
<table width="1500" border="1">
<tbody>
<tr>
<td width="238" height="815">
<div id="head1"><p align="center">服    务</p></div>
<div id="head2">
<div id="head6">总服务台</div>
<p>  <a href="#">借阅服务</a></p>
<p>  <a href="#">馆际互借</a></p>
<p>  <a href="#">文献传递</a></p>
<p>  <a href="#">情报服务</a></p>
<p>  <a href="#">读者培训</a></p>
<p>  <a href="#">参观接待</a></p>
<p>  <a href="#">空间服务</a></p>
<p>  <a href="#">自助服务</a></p>
</div>
<div id="head5"></div>
<div id="head3">
<p align="right"><font color="blue">>>>>>>>></font></p>
</div>
<div id="head4">
<table width="238" border="0">
<tbody>
<tr>
<td width="238" height="135"><img src="imagines/timg1.jpg" width="238" height="135" alt=""/></td>
</tr>
<tr>
<td height="135"><img src="imagines/timg.jpg" width="238" height="135" alt=""/></td>
</tr>
<tr>
<td height="135"><img src="imagines/timg2.jpg" width="238" height="135" alt=""/></td>
</tr>
</tbody>
</table>

</div>
</td>
<td width="1347">
<div id="head7">
<p>首页<span style="font-size: 14px; color: #F01215;">>>服务>>总服务台</span></p>
<p> </p>
<p style="font-size: 24px">总服务台</p>
</div>
<div id="table">
<div id="head7">
<p style="text-align: center; font-size: 24px;"><strong>总服务台服务一览表</strong></p>
<p> </p>
<p><strong>总服务台：</strong>处理读者服务的各项事务。</p>
</div>
<table width="1248" border="1">
<tbody>
<tr>
<td width="90" height="30" style="text-align: center">类别</td>
<td width="1142" style="text-align: center">内            容</td>
</tr>
<tr>
<td height="90" style="text-align: center">电话</td>
<td>
<p>宝山校区校本部馆：66134667</p>
<p>延长校区文荟馆：56331286</p>
<p>嘉定校区联合馆：69982759</p>
</td>
</tr>
<tr>
<td height="30" style="text-align: center">开放时间</td>
<td>
<p>周一～周日 8：00----22：00（国定假、寒暑假除外）</p>
</td>
</tr>
<tr>
<td height="" style="text-align: center">咨询与服务</td>
<td height="480">
<p>使用图书馆的过程中，遇到的一般性问题，比如图书馆的馆藏、文献布局、服务方式、借阅规则等；</p>
<p> </p>
<p>检索文献过程中遇到的问题，比如检索到某一本图书后怎样找到等；</p>
<p> </p>
<p>图书馆其它资源利用方面的咨询；</p>
<p> </p>
<p>借阅图书中遇到的问题，比如借书、还书、预约、续借方法等；</p>
<p> </p>
<p>借阅图书中遇到的问题，比如借书、还书、预约、续借方法等；</p>
<p> </p>
<p>硕博士读者离校，论文提交方法及获得论文提交回执单地点的指引；</p>
<p> </p>
<p>一卡通解挂方法与地点说明；</p>
<p> </p>
<p>校友进馆校友卡登记送交开通；</p>
<p> </p>
<p>自助复印打印机器的使用指导；</p>
<p> </p>
<p>自助还款机的使用指导；</p>
<p> </p>
<p>使用图书馆过程中的各种问题咨询,</p>
<p> </p>
<p>遗失物品的保管及领取登记。</p>
</td>
</tr>
<tr>
<td height="30" style="text-align: center">机器维护与保修</td>
<td>工作用电脑、打印机、自助借还机、自助复印打印机的维护与报修。</td>
</tr>
</tbody>
</table>

</div>
</td>
</tr>
</tbody>
</table>

</div>
</body>
</html>

(4)页面“关于本馆”程序代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上海图书馆</title>
<style type="text/css">
*{margin:0; padding:0;}
body{background-color:#CCC;}
.clear{clear:both;}

#container{
background-color:#F0BBBC;
height:510px;
width:1500px;
margin:auto;}
#container2{
background-color:#E6ECCC;
width:1500px;
height:820px;
margin:20px auto;
}

#picture{height:470px; margin:0px;}

#label{background-color:#CEDDEC； height:30px;}

#head1{
background-color:blue;
height:30px;
margin:0px 0px 10px 0px;
}
#head2{
background-color:#FBB9B9;
height:270px;
}
#head3{height:20px;}
#head4{
background-color:#B9EBF3;
height:405px;
}
#head5{height:45px;}
#head6{
background-color:#F1C93C;
height:30px;
}
#head7{height:60px;}

#table{
background-color:#A4F4DC;
height:760px;
}
a:link {
color: #070707;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #070707;
}
a:hover {
text-decoration: none;
color: #94CB79;
}
a:active {
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<div id="picture">
<img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/> </div>
<div id="label">
<table width="1500" border="1">
<tbody>
<tr>
<td width="50" height="30" align="center"><a href="Untitled-1.html">首页</a></td>
<td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
<td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
<td width="50" align="center"><a href="#"><font color="blue">关于本馆</font></font></a></td>
<td width="50" align="center"><a href="#">我的图书馆</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="container2">
<table width="1500" border="1">
<tbody>
<tr>
<td width="238" height="815">
<div id="head1">
<p align="center">关  于  本  馆</p></div>
<div id="head2">
<div id="head6">本馆概况</div>
<p>  <a href="#">开放时间</a></p>
<p>  <a href="#">功能布局</a></p>
<p>  <a href="#">组织机构</a></p>
<p>  <a href="#">规章制度</a></p>
<p>  <a href="#">研究与交流</a></p>
<p>  <a href="#">图书馆研究生</a></p>
<p>  <a href="#">品牌服务</a></p>
<p>  <a href="#">馆员天地</a></p>
<p>  <a href="#">网站地图</a></p>
<p>  <a href="#">关于我们</a></p>
</div>
<div id="head5"></div>
<div id="head3">
<p align="right"><font color="blue">>>>>>>>></font></p>
</div>
<div id="head4">
<table width="238" border="0">
<tbody>
<tr>
<td width="238" height="135"><img src="imagines/timg1.jpg" width="238" height="135" alt=""/></td>
</tr>
<tr>
<td height="135"><img src="imagines/timg.jpg" width="238" height="135" alt=""/></td>
</tr>
<tr>
<td height="135"><img src="imagines/timg2.jpg" width="238" height="135" alt=""/></td>
</tr>
</tbody>
</table>

</div>
</td>
<td width="1347">
<div id="head7">
<p>首页<span style="font-size: 14px; color: #F01215;">>>关于本馆>>本馆概况</span></p>
<p> </p>
<p style="font-size: 24px">本馆概况</p>
</div>
<div id="table">
<div id="head7">
<p style="text-align: center; font-size: 24px;"><strong>本馆概况</strong></p>
</div>
<p>    上海大学图书馆由宝山校区的校本部馆、延长校区的文荟馆和嘉定校区的联合馆三个分馆组成。馆舍总面积5.39万平方米，拥有18个阅览室，可提供阅览座位4,044 个；拥有可供师生讨论交流的研究空间，目前有6个研究空间可供预约使用；除国定节假日外，每天开放14小时，每周开放98小时，全馆实行开放式借阅一体化服务，并通过三个校区分馆的馆藏通借通还淡化了校区的界限，为师生提供了良好的阅读和学习环境。</p>
<p> </p>
<p>    上海大学图书馆拥有丰富的馆藏资源。自1994年四校合并后，紧密配合学校学科发展的步伐，加强了学校新建学科（人文社科类等）的馆藏资源建设，使我馆的馆藏资源涵盖了学校的所有学科，为我校的教学与科研提供了强有力的文献信息保障。20多年来，图书馆在继续增加纸本馆藏的同时，大力发展数字资源，引入大量的国内外电子资源，提供中国知网（CNKI）、万方数据知识服务平台、维普中文科技期刊数据库、超星电子书、新东方多媒体学习平台、Web of Science、Wiley Online Library、Science Direct, Elsevier(SD)、Springer Link等数据库，已形成了由纸本图书、纸本报刊（包括合订本）、电子图书、电子报刊全文数据库、多媒体数据库及二次文献检索平台等所组成的多类型、多载体的综合性馆藏体系。师生还可以通过馆际互借与文献传递服务从国内外图书馆获得本馆没有的文献资源。截止2016年底，图书馆拥有纸本文献401.9万册，当年订购纸质中文报刊1,533种，外文报刊300种；订购数据库75种，电子期刊7.0万种，电子书190万种。图书馆提供歌德电子书借阅机和龙源期刊云借阅机，为读者提供电子图书期刊下载服务。</p>
<p> </p>
<p>    上海大学图书馆本着服务第一，读者至上的理念，在加强馆藏建设的同时，扩展与深化学科服务，加强与院系的联系，针对教学科研的需求主动开展服务，开设多种信息素养课程与培训，承办课题查新、论文咨询、代检代查等服务，并进行专题性学科服务。</p>
<p> </p>
<p>    上海大学图书馆采用Aleph信息集成管理系统，配置了总存储容量为180TB的网络存储设备。馆内配备了大量的网络端口和计算机终端，读者可在校园网的任意客户端访问本馆数字资源，进行馆藏的查询、预约和续借等，无线网覆盖全馆，具有良好的网络应用环境；全馆提供自助复印扫描打印服务，校本部馆还提供RFID自助借还书机，读者可进行图书的自助借还。</p>
<p> </p>
<p>    紧密配合上海大学建设世界一流、特色鲜明的综合性研究型大学的发展战略，上海大学图书馆向着建设具有国际化视野、学科化服务、数字化资源的现代化图书馆的目标不断前进。</p>
<P> </P>
<p> </p>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<p align="right">相关链接：                          </p>
<p align="right"><font color="red"><a href="#">校本部馆概况  </a></font></p>
<p align="right"><font color="red"><a href="#">文荟馆概况</a>   </font></p>
<p align="right"><font color="red"><a href="#">联合馆概况</a>   </font></p>

</div>
</td>
</tr>
</tbody>
</table>

</div>
</body>