1.1系統(tǒng)分析與功能介紹

本系統(tǒng)主要分為首頁、分類、書架、作者,這四個模塊的設(shè)計,讀者可以實現(xiàn)用戶注冊登錄,小說瀏覽,小說閱讀等功能,作者用戶可以實現(xiàn)注冊登錄,小說閱" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 文學網(wǎng)站設(shè)計——分類模塊

文學網(wǎng)站設(shè)計——分類模塊

時間:2023-09-04 23:18:01 | 來源:網(wǎng)站運營

時間:2023-09-04 23:18:01 來源:網(wǎng)站運營

文學網(wǎng)站設(shè)計——分類模塊:一、系統(tǒng)總體分析與設(shè)計

1.1系統(tǒng)分析與功能介紹

本系統(tǒng)主要分為首頁、分類、書架、作者,這四個模塊的設(shè)計,讀者可以實現(xiàn)用戶注冊登錄,小說瀏覽,小說閱讀等功能,作者用戶可以實現(xiàn)注冊登錄,小說閱讀,發(fā)表文章,更新文章等功能。

本小說閱讀網(wǎng)站目標在于為讀者提供舒適的瀏覽、閱讀體驗,因此主要服務對象側(cè)重于讀者。關(guān)于本網(wǎng)站側(cè)重點在前臺系統(tǒng),主要是讀者用戶所涉及到的功能,例如注冊,選書,閱讀。以下介紹主要的模塊:

1.1.1讀者功能模塊

二、網(wǎng)站設(shè)計

2.1設(shè)計頁面的主色調(diào)與風格

網(wǎng)站的界面主色調(diào)的搭配影響著整個網(wǎng)站元素,它不僅會為網(wǎng)站提供顏值擔當,而且會給網(wǎng)站帶來巨大的瀏覽訪問量。本網(wǎng)站的主色調(diào)是淺藍色,以素雅、簡約為目的,給讀者用戶提供一個舒服自然的瀏覽閱讀效果。主題頁面布局上分三部:頂部、導航、主界面。在頂部主要是提供給用戶注冊、登錄功能;導航是整個網(wǎng)站功能的核心,分為四個部分:首頁、分類、書架、留言板;主界面主要展示特別熱門的書籍,將它們放在比較顯眼的位置以此顯示重要性,吸引讀者的閱讀興趣,也同時是為整個頁面增添動感與活力。

2.2下面是網(wǎng)站中分類頁的效果圖:

網(wǎng)頁分布格局整體顯示為:上、中、下三個部分。上部分為:網(wǎng)站導航(返回上一頁、后退下一頁)、子功能——小說分類;中間部分分為兩個板塊:書籍封面、書籍簡介(包括書名、目錄按鈕、閱讀按鈕)、作者簡介、書籍內(nèi)容簡介;下部包括兩個內(nèi)容:下一頁與返回首頁導航,版權(quán)所有信息。

2.3 分類頁面功能介紹

顧名思義分類模塊的設(shè)計主要是向讀者用戶展示各類書籍界面與詳情。

(1) 分類頁面頂部

*“Back”按鈕功能:后退

*“Forward”按鈕功能:向前

這兩個按鈕主要是為切換頁面設(shè)置。本網(wǎng)頁每一個分頁只顯示一本書籍的介紹,這也是與其他書籍閱讀網(wǎng)站設(shè)計的不同之處。

*“您當前所在的位置…”:告知讀者用戶當前頁面所在位置,為讀者用戶提供便利。

*“注冊”:用于初次訪問讀者登錄。

頂部代碼展示

<script>function goBack(){ window.history.back()}</script><script>function goForward(){ window.history.forward()}</script></head><body> <div id="container"> <table width="100%"> <tr> <td align="left" ><input type="button" value="Back" onclick="goBack()"><input type="button" value="Forward" onclick="goForward()"></td> <td colspan="20">您當前所在的位置:分類>><a href="hlm.html">歷史文學</a>>><a href="hlm.html">紅樓夢</a></td> <td align="right"><a href="../注冊頁面/zhc.html">注冊</a></td> </tr> </table>(2)網(wǎng)站logo以及導航部分

“首頁”,“分類”,“書架”,“留言板”,是整個網(wǎng)站的四大模塊,每一個頁面都有此項核心功能展示,為讀者用戶提供了極大的便利。

書架,這一部分類似于“收藏”、“書簽”的作用。為讀者用戶再次閱讀提供便利。

留言板,這一部分起到了讀者與作者的交互交流的作用。讀者,將閱讀感想反饋給網(wǎng)站及作者,為作者更新,刪除,連載......等起到了極大的幫助。促進了小說質(zhì)量的提升。

網(wǎng)站logo以及導航部分代碼展示:

<div id="header" > <div id="logo"><img src="images/logo.jpg" ></div> <div id="navigation"> <a href="../index.html" class="btn-slide"> <span class="circle"><i class="fa fa-download"></i></span> <span class="title">首頁</span> </a> <a href="ly.html" class="btn-slide"> <span class="circle"><i class="fa fa-download"></i></span> <span class="title">分類</span> </a> <a href="../書架/書架.html" class="btn-slide"> <span class="circle"><i class="fa fa-download"></i></span> <span class="title">書架</span> </a> <a href="../lyb.html" class="btn-slide"> <span class="circle"><i class="fa fa-download"></i></span> <span class="title">留言板</span> </a></div></div></div>(3)分類頁面menu部分

這一部分主要是將書籍進行分類。用戶可以根據(jù)自己的興趣選擇自己想要閱讀的書籍。

menu部分代碼展示

<div id="menu" > <ul> <li class="junshi"><a href="ly.html">軍事</a></li> <li class="kexue"><a href="kcj.html">科學</a></li> <li class="wenxue"><a href="lt.html">文學</a></li> <li class="dili"><a href="sjz.html">地理</a></li> <li class="lishi"><a href="hlm.html">歷史文學</a></li> </ul></div>(4)分類頁面中間部分

分類頁面中間部分就是將書籍的概況展示給讀者用戶,讓用戶對書籍作以大致了解。

這一部分展示了書籍封面,讓讀者對具體書籍的出版社作以了解;讀者可以點擊“目錄”二字,觀看書籍具體章節(jié)信息,點擊“閱讀”二字進行閱讀;本網(wǎng)站還為了便利用戶了解作者,將作者的具體介紹做了一個單獨的網(wǎng)頁,讀者只需要點擊作者名稱即可鏈接到作者頁;內(nèi)容簡介以最精煉的文字提供給讀者用戶最有價值的信息。

分類頁面中間部分代碼:

<div id="maincontent" > <div id="sidebar1" > <img src="images/hlm.jpg" width="300px" height="420px"> </div> <div id="content"> <p class="p1"><h3>書名紅樓夢</h3> <span> <a href="../目錄/歷史/紅樓夢/index.html">目錄</a> <a href="../書籍內(nèi)容/紅樓夢/紅樓夢1.html">閱讀</a></span></p> <p class="p2">作者<a href="../作者專區(qū)/C112index.html">曹雪芹</a>(約 1715年5月28日-約1763年2月12日),名沾,字夢阮,號雪芹,又號芹溪、芹圃 </p> <p class="p3">內(nèi)容簡介:《紅樓夢是我國古代四大名著之一,章回體長篇小說,成書于清代乾隆年間,是我國古代最偉大的長篇小說之一也是世界文學經(jīng)典巨著之一。又名石頭記》、《情僧錄》、《風月寶鑒》、《金陵十二釵。作者曹雪芹最為紅學界關(guān)注的版本是脂硯齋重評石頭記》(詳情請見關(guān)于紅樓夢版本的敘述)。由于原著后半部分散失,許多續(xù)作紛紛出爐,據(jù)統(tǒng)計,《紅樓夢續(xù)書種類高達百余種較為著名的續(xù)作是由高鶚續(xù)全的一百二十回紅樓夢通俗版本和清代才女顧太清等的續(xù)作和整理版本。總之,《紅樓夢至今還是一部不完整的作品也是一部讀者永遠猜不著底的謎書,這也是紅樓夢極具魅力的因素之一</p> </div> </div> (5) 分類頁面底部

分類頁面底部主要有兩個功能和一個版權(quán)信息:跳轉(zhuǎn)到“下一頁”即下一個書籍信息;“返回首頁”即網(wǎng)站首頁;版權(quán)所有,違者必究。

頁面底部代碼:

<div id="footer"> <center><p><a href="sj.html">下一頁</a>|<a href="../index.html">返回首頁</a></p> 版權(quán)?;版權(quán)所有,違者必究 <address>E-mail:lishi@zu.com</address></center></div>點擊“下一頁”頁面效果圖

下面是我的設(shè)計結(jié)構(gòu)圖:

下面是我的所有制作頁面效果:(9個html頁面,1個css代碼展示圖)

@charset "utf-8";/* CSS Document */body{width:1000px;margin:auto;}#header{width:1000px;height:100px}#logo{width:300px;float:left;}#navigation {font-size:24px; margin: 20px auto;text-align: center;}.btn-slide {position: relative;display: inline-block; height: 50px;width: 130px;line-height: 50px;padding: 0;border-radius: 50px;background:#679ae6;border: 2px solid #0099cc; margin: 10px;transition: .5s}#menu{border:1px solid #CCC;height:30px;background:#6495ED;margin-bottom:5px;}#menu ul{list-style:none;margin:0px;}#menu ul li{padding:0px 40px;line-height:30px;float:left}a:link{color:brown;text-decoration:none}a:visited{color:black}a:active{color:blueviolet}a:hover{color:burlywood}.junshi{border-bottom:3px solid #5F9EA0;background:#F0F8FF;margin-right:25px;}.kexue{border-bottom:3px solid #5F9EA0;background:#F0F8FF;margin-right:25px;}.wenxue{border-bottom:3px solid #5F9EA0;background:#F0F8FF;margin-right:25px;}.dili{border-bottom:3px solid #5F9EA0;background:#F0F8FF;margin-right:25px;}.lishi{border-bottom:3px solid #5F9EA0;background:#F0F8FF;}img{border:0}.p1{font-family:楷體;font-size:30px;color:#778899;}.p2{font-family:華文行楷;font-size:18px;color:#B8860B;}.p3{font-family:隸書;font-size:18px;color:#708090}#sidebar1{width:300px;height:500px;float:left}#maincontent{width:1000px;height:600px;margin-top:20px;margin-bottom:5px}#content{margin-top:0;margin-bottom:0;margin-left:350px;margin-right:100px;background-size: auto 100%;background-color:#F0FFFF}#footer{width:100%;background-size:auto;position:absolute;bottom:0px;left:0px;background-color:#6495ED}

關(guān)鍵詞:分類,設(shè)計,文學

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉