簡單靜態網頁的設計

阿新 • • 發佈：2019-02-08

總體思路：先構思好一個圖書館的框架

以這個框架為主體，進行拓展，豐富其他內容：

只是簡單地做了四個頁面，“我的圖書館”頁面可以採用同樣的方式編寫出來。

主體的程式設計：

#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>

</html>

ps：程式設計裡的圖片是圖不對題，採用的是其他圖書館圖片。

簡單靜態網頁的設計

主體的程式設計：

拓展內容：

(1)頁面“首頁”程式程式碼：

(2)頁面“資源”程式程式碼：

(3)頁面“服務”程式程式碼：

(4)頁面“關於本館”程式程式碼：

html+js 簡單靜態網頁設計

html+jsp 簡單靜態網頁設計

簡單靜態網頁的設計

練習HTML——簡單的網頁設計

HTML靜態網頁設計

簡單網頁設計與布局

靜態網頁框架設計首次體驗（文章改）

Python開發簡單爬蟲之靜態網頁抓取篇：爬取“豆瓣電影 Top 250”電影數據

網頁設計：vim+emmet簡單演練

HTML靜態網頁css成品DW大學生網頁作業制作畢業設計

《基礎網頁製作》一個超簡單的div佈局，製作靜態網頁很簡單

tomcat部署簡單的html靜態網頁

一個簡單的登陸網頁設計(JSP+MySQL+Tomcat)

簡單網頁設計前端（入門）

Websocket 簡單對話:靜態網頁與pycharm對話

html網頁設計細節總結及實踐經驗總結

Html靜態網頁下載—Teleport Pro 1.68 官方原版

github上的項目發布成靜態網頁

超級簡單JS網頁倒計時代碼

網頁設計、web前端、後臺的開發流程和註意事項 -----轉

簡單靜態網頁的設計

主體的程式設計：

拓展內容：

(1)頁面“首頁”程式程式碼：

(2)頁面“資源”程式程式碼：

(3)頁面“服務”程式程式碼：

(4)頁面“關於本館”程式程式碼：

相關推薦