畢業(yè)設(shè)計(jì)商業(yè)類

1、滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文滁州職業(yè)技術(shù)學(xué)院信息工程系2015屆軟件技術(shù)專業(yè)畢業(yè)論文姓 名： 姜文亮 班 級(jí)： 12 級(jí)軟件（2）班 設(shè)計(jì)課題： 圖書(shū)商業(yè)網(wǎng)站 指導(dǎo)教師： 趙衛(wèi)東 2014年 11月 30日- 摘 要隨著網(wǎng)絡(luò)的飛速發(fā)展，電腦越來(lái)越平民化，進(jìn)入千家萬(wàn)代中。世界的發(fā)展潮流也進(jìn)入信息時(shí)代。網(wǎng)上購(gòu)物作為電子商務(wù)的一種形式正在以其高效，低成本的優(yōu)勢(shì)，逐步成為新興的經(jīng)營(yíng)模式。對(duì)于平時(shí)工作繁忙，生活節(jié)奏極快的都市人來(lái)說(shuō)，讓他們?nèi)D書(shū)館、書(shū)店看書(shū)選書(shū)已經(jīng)不現(xiàn)實(shí)了。所以，網(wǎng)絡(luò)書(shū)城正適應(yīng)了當(dāng)今社會(huì)節(jié)奏加速地生活，使顧客足不出戶就能輕松快捷的購(gòu)買(mǎi)到自己想看的書(shū)籍。一個(gè)好的圖書(shū)商城需要一個(gè)美觀

2、、信息全面的前臺(tái)展示。所以便有了此次的設(shè)計(jì)。吸引瀏覽用戶的則是視覺(jué)效果出色、信息量豐富、使用起來(lái)便捷的網(wǎng)頁(yè)，所以網(wǎng)頁(yè)設(shè)計(jì)尤為重要。此次網(wǎng)頁(yè)設(shè)計(jì)用到了dreamweaver、photoshop等制作工具。本文從網(wǎng)頁(yè)設(shè)計(jì)的角度出發(fā)，介紹一些設(shè)計(jì)中要素和技巧，例如框架、css樣式的使用等等。 - 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文目錄目錄i一、緒論11.1課題的研究背景11.2圖書(shū)網(wǎng)站的現(xiàn)狀1二、 開(kāi)發(fā)工具介紹22.1 Dreamweaver22.2 Photoshop2三、需求分析33.1 網(wǎng)站開(kāi)發(fā)背景33.2 功能性需求33.3 非功能性需求3四、總體設(shè)計(jì)54.1 建立站點(diǎn)54.2 素材制作處

3、理54.3 CSS分類6五、詳細(xì)設(shè)計(jì)75.1 主頁(yè)設(shè)計(jì)75.2 注冊(cè)頁(yè)面85.3 留言頁(yè)面115.4 圖書(shū)資訊頁(yè)面135.5 圖書(shū)分類頁(yè)面155.6 我的圖書(shū)頁(yè)面175.7 特別推薦頁(yè)面185.8 購(gòu)物車(chē)頁(yè)面制作21六、網(wǎng)站測(cè)試23七、結(jié)束語(yǔ)24- 滁州職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)畢業(yè)論文一、緒論1.1課題的研究背景 隨著科技飛速的發(fā)展，人類學(xué)習(xí)和使用信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命。這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對(duì)社會(huì)發(fā)展的推動(dòng)更加復(fù)雜巨大。網(wǎng)站也成為人們最簡(jiǎn)便和喜愛(ài)的交流方式和傳遞信息的手段，尤其是在商品交易電子商務(wù)方面，人們更追求簡(jiǎn)便的消費(fèi)方式。網(wǎng)絡(luò)的發(fā)展以前所

4、未有的深度和廣度影響人們生活的各個(gè)角落，越來(lái)越多的人看到了網(wǎng)絡(luò)蘊(yùn)含的商機(jī)和經(jīng)濟(jì)價(jià)值，并積極投入電子商務(wù)中。電子商務(wù)就是商業(yè)的電子化。例如網(wǎng)上圖書(shū)商城，它是目前應(yīng)用最廣、最成功的典范之一。網(wǎng)絡(luò)書(shū)城的崛起對(duì)傳統(tǒng)的圖書(shū)流通體系產(chǎn)生了強(qiáng)烈的沖擊，有效的縮短了圖書(shū)流通發(fā)行環(huán)節(jié)，將廣大的讀者、圖書(shū)、出版者、發(fā)行者緊密的結(jié)合在一起，大大提高了圖書(shū)流通率。1.2圖書(shū)網(wǎng)站的現(xiàn)狀我國(guó)早在1997年就注重電子商務(wù)的發(fā)展，逐步建立了電子數(shù)據(jù)交換技術(shù)委員會(huì)和電子商務(wù)協(xié)會(huì)，部分地區(qū)的高新技術(shù)企業(yè)可以享受?chē)?guó)稅“三免三減”政策。國(guó)家大力支持發(fā)展電子商務(wù)，在網(wǎng)絡(luò)上如雨后春筍般的冒出了很多商家、企業(yè)。那么自然，進(jìn)入信息時(shí)代的今天

5、，人們已經(jīng)沒(méi)有時(shí)間去圖書(shū)館、書(shū)店去看書(shū)，買(mǎi)書(shū)。于是便有了圖書(shū)網(wǎng)站的出現(xiàn)。圖書(shū)網(wǎng)站正在以一種迅猛的姿態(tài)發(fā)展。虛擬書(shū)店成本比實(shí)體書(shū)店低；不需要將大筆的流動(dòng)資金作為貨物而沉寂在店里，可以依靠“零庫(kù)存”管理，縮短資金周轉(zhuǎn)周期；同時(shí)可以實(shí)現(xiàn)24小時(shí)營(yíng)業(yè)；可以利用多媒體促銷(xiāo)，讓顧客從文字、聲音、圖像全方位的感受；甚至依靠客戶的數(shù)據(jù)庫(kù)提供全新的人性化服務(wù)。綜上所述，網(wǎng)上圖書(shū)商城充滿活力，有著源源不斷的發(fā)展動(dòng)力。據(jù)調(diào)察顯示：一個(gè)網(wǎng)站如果不能在8秒鐘吸引瀏覽者，那么瀏覽者就會(huì)離開(kāi)。而瀏覽者第一眼看到的，被什么吸引呢？自然就是本文的中心網(wǎng)頁(yè)。網(wǎng)頁(yè)對(duì)于一個(gè)網(wǎng)站的重要性可見(jiàn)一斑！二、開(kāi)發(fā)工具介紹 2.1 Dreamw

6、eaverDreamweaver簡(jiǎn)稱“DW”，中文意思是“夢(mèng)想編織者”。是一種集網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理于一體的所見(jiàn)即所得的網(wǎng)頁(yè)編織器。DW是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉的制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的圖片。 “DW”支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化網(wǎng)頁(yè)設(shè)計(jì)、圖像編輯、全局查找替換、全FTP 功能、處理Flash和Shockwave等富媒體格式和動(dòng)態(tài)HTML、基于團(tuán)隊(duì)的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。 2.2 Photo

7、shopPS主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修和繪圖工具，可以有效的進(jìn)行圖片編輯工作。PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面均有涉及。PS的專長(zhǎng)在于圖像處理，而不是圖形創(chuàng)作。圖像處理是對(duì)已有的位圖圖像進(jìn)行編輯加工處理以及運(yùn)用一些特殊效果，其重點(diǎn)在意對(duì)圖像的處理加工。網(wǎng)絡(luò)的普及促使更多的人需要掌握PS，因?yàn)樵谥谱骶W(wǎng)頁(yè)時(shí)PS時(shí)必不可少的網(wǎng)頁(yè)圖像處理軟件。三、需求分析3.1 網(wǎng)站開(kāi)發(fā)背景在信息化的今天，商業(yè)行為也融入其中。在網(wǎng)絡(luò)平臺(tái)上交易買(mǎi)賣(mài)，已經(jīng)屢見(jiàn)不鮮。一個(gè)好的商業(yè)網(wǎng)站想要吸引客戶，那么必須要有制作精良的網(wǎng)頁(yè)。本文便論述了一個(gè)圖書(shū)網(wǎng)站的前端頁(yè)面的制作。3.2 功能性

8、需求（1）用戶模塊：用戶可以注冊(cè)為會(huì)員，會(huì)員可以進(jìn)行登錄，查看自己的個(gè)人信息或者修改個(gè)人信息。（2）留言管理：會(huì)員進(jìn)行登錄后，可以給管理員留言，提出問(wèn)題或者咨詢相關(guān)事宜。（3）圖書(shū)展示模塊：網(wǎng)站有圖書(shū)分類展示，有特別推薦展示，有打折、促銷(xiāo)、熱賣(mài)、新書(shū)等一系列的圖書(shū)展示。供廣大客戶選擇。（4）企業(yè)展示模塊：企業(yè)介紹、通訊地址、電話傳真以及企業(yè)的主要業(yè)務(wù)都展示在網(wǎng)頁(yè)上，讓客戶可以全方面的了企業(yè)，認(rèn)可企業(yè)。（5）購(gòu)物車(chē)模塊：圖書(shū)加入購(gòu)物車(chē)；會(huì)員可以瀏覽購(gòu)物車(chē)；修改購(gòu)物車(chē)中的商品數(shù)量；刪除購(gòu)物車(chē)中的商品；清空購(gòu)物車(chē)中的商品；直接在購(gòu)物車(chē)中付款。 3.3 非功能性需求用戶界面需求：符合Web2.0標(biāo)準(zhǔn)，

9、保證在主流的IE、Friefox瀏覽器上具備同樣的用戶體驗(yàn)。設(shè)計(jì)風(fēng)格遵循簡(jiǎn)潔、易用、美觀、重視用戶體驗(yàn)、以用戶為中心的原則。軟硬件環(huán)境需求：由滁州市組織部提供軟件運(yùn)行服務(wù)器，并負(fù)責(zé)服務(wù)器運(yùn)行穩(wěn)定、安全。網(wǎng)站設(shè)計(jì)保證客戶端可以通過(guò)任意主流瀏覽器均可無(wú)障礙地訪問(wèn)網(wǎng)頁(yè)。 產(chǎn)品質(zhì)量需求：（1）正確性：保證網(wǎng)頁(yè)的正確性，數(shù)據(jù)、文檔記錄準(zhǔn)備無(wú)誤，按照用戶需求正確執(zhí)行任務(wù)。（2）健壯性：網(wǎng)頁(yè)設(shè)計(jì)保證網(wǎng)頁(yè)本身能夠抵御非要數(shù)據(jù)，能夠保證事務(wù)的一致性，盡力避免網(wǎng)頁(yè)瀏覽錯(cuò)誤。（3）可靠性：設(shè)計(jì)保證在安全服務(wù)器環(huán)境下，網(wǎng)頁(yè)能夠正常運(yùn)行。（4）性能和效率：在保證穩(wěn)定、安全的前提下，系統(tǒng)能夠維持高并發(fā)操作。保證系統(tǒng)具有足

10、夠的性能，滿足企業(yè)運(yùn)行需求。（5）易用性：易用性是設(shè)計(jì)能夠滿足客戶操作使用程度，軟件開(kāi)發(fā)重視用戶體驗(yàn)，極力降低使用門(mén)檻、保證具備一般計(jì)算機(jī)操作技能的用戶能夠順利瀏覽網(wǎng)頁(yè)。另外，設(shè)計(jì)重視使用過(guò)程中的操作提示和說(shuō)明，能夠給用戶明確的操作指導(dǎo)。（6）安全性：保證具備較高的安全性，避免常規(guī)病毒的侵入。四、總體設(shè)計(jì)4.1 建立站點(diǎn)所謂站點(diǎn)，就是將網(wǎng)頁(yè)文件和素材文件，有條理地放置站點(diǎn)文件夾里，這些文件與文件夾就構(gòu)成了網(wǎng)站的實(shí)質(zhì)內(nèi)容。站點(diǎn)文件夾里除了網(wǎng)頁(yè)文件還有素材文件，所謂素材就是網(wǎng)頁(yè)中所用到的圖像、聲音、視頻等，這些內(nèi)容是以單獨(dú)文件的形式存在。建立站點(diǎn)的步驟：首先在本地硬盤(pán)上建立一個(gè)用來(lái)存放站點(diǎn)的文件夾

11、，這個(gè)文件夾就是本地站點(diǎn)的根目錄。這個(gè)站點(diǎn)可以是空的，也可以是非空的。然后啟動(dòng)“DW”，執(zhí)行“站點(diǎn)>管理站點(diǎn)>新建>站點(diǎn)”菜單命令。在彈出的對(duì)話框中設(shè)置新建站點(diǎn)的參數(shù)，默認(rèn)狀態(tài)下，激活的是“高級(jí)”選項(xiàng)卡，并且頁(yè)框中“分類”列表選中的是“本地信息”。然后輸入網(wǎng)站名稱，網(wǎng)站名顯示在網(wǎng)頁(yè)面板的站點(diǎn)下拉列表中。站點(diǎn)名稱可以使用任何名稱，它不會(huì)在瀏覽器上顯示，只用來(lái)參考。如可以輸入：index。最后就能在站點(diǎn)面板中可以看到剛才新建站點(diǎn)index。4.2 素材制作處理文字和圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)兩個(gè)最基本的元素?？梢院?jiǎn)略的理解為：文字，就是網(wǎng)頁(yè)的內(nèi)部實(shí)質(zhì)意義；圖片，就是網(wǎng)頁(yè)的美容護(hù)膚品，網(wǎng)頁(yè)

12、的外衣。除此以外，網(wǎng)頁(yè)的元素還包括動(dòng)畫(huà)音樂(lè)等。圖片：主要通過(guò)網(wǎng)絡(luò)媒體獲得圖片資料，如圖書(shū)分類的圖片就是從網(wǎng)絡(luò)上獲取的。主要是瀏覽圖書(shū)網(wǎng)站并搜集素材的，并將獲取的圖片素材根據(jù)需要利用Photoshop軟件適當(dāng)處理，再添加到網(wǎng)頁(yè)的某處地方，充分提高網(wǎng)頁(yè)的觀賞性。每個(gè)網(wǎng)站都有l(wèi)ogo，我們網(wǎng)站的logo很簡(jiǎn)單就是潤(rùn)澤圖書(shū)的四個(gè)文字，也是我們企業(yè)的名字。如圖4.1所示：圖4.1 網(wǎng)站logo文字：由設(shè)計(jì)思路展開(kāi)，搜集所需要的文字資料。很多文字素材也來(lái)自于瀏覽相關(guān)網(wǎng)站獲得，并對(duì)素材分析選取，進(jìn)行相應(yīng)的文字編輯和加工。 4.3 CSS分類CSS（層疊樣式表）是一種制作網(wǎng)頁(yè)的新技術(shù)，現(xiàn)在已經(jīng)成為大多數(shù)的瀏覽

13、器所支持，成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具之一。使用CSS能夠簡(jiǎn)化網(wǎng)頁(yè)的個(gè)格式代碼，加快下載顯示的速度和減少需要上傳的代碼，也減少了重復(fù)勞動(dòng)的工作量。 為了將網(wǎng)頁(yè)的Html結(jié)構(gòu)代碼以網(wǎng)頁(yè)形式層現(xiàn)出來(lái)，需要編寫(xiě)CSS代碼?？梢园阉械腃SS代碼保存在同一個(gè)文件里。但這樣不利已以后的維護(hù)。因此需要將CSS分門(mén)別類的保存在不同文件里。具體分類如下：body.cssheader.css、crumb_nav.css、center.css、feat_prod_box.css、languages_box.cssCart.css、contact_form.css、cart_table.css、footer.css、

14、 然后在創(chuàng)建一個(gè)main.css文件，把上面的css文件都放到main.css文件下，代碼如下。import url(“body.css”) 、import url(“header.css”)、 import url(“crumb_nav.css”)、 import url(“center.css”) 、 import url(“feat_prod_box.css”)、import url(“l(fā)anguages_box.css”)、import url(“Cart.css”)、import url(“contact_form.css”)、import url(“cart_table.css”)

15、、import url(“footer.css”)五、詳細(xì)設(shè)計(jì)5.1 主頁(yè)設(shè)計(jì)該網(wǎng)站的頁(yè)面基本上都是左右結(jié)構(gòu)，右半部的頁(yè)面大致一樣。右邊從上到下依次是購(gòu)物車(chē)、企業(yè)簡(jiǎn)介、圖書(shū)促銷(xiāo)、圖書(shū)分類。頁(yè)面風(fēng)格：主頁(yè)主要分為左右兩大部分。主頁(yè)左上使用了圖片輪換技術(shù)，介紹了打折促銷(xiāo)等活動(dòng)。使網(wǎng)頁(yè)看起來(lái)更加生動(dòng)全面。主頁(yè)左下就是公司的介紹。都是一些文字性的描述。具體圖片如下：圖5.1 圖書(shū)網(wǎng)站首頁(yè)圖片輪換的部分代碼如下：<div class="num"><span id="hah" class="n1" onclick="n

16、umPic(1);">1</span><span class="n2" onclick="numPic(2);">2</span><span class="n3" onclick="numPic(3);">3</span><span class="n4" onclick="numPic(4);">4</span></div>CSS代碼如下：.slider .num

17、width:100px; height:25px; position:absolute; right:0; bottom:0;.slider .num span display:block; font-size:12px; line-height:16px; font-weight:normal;text-align:center;height:16px;width:16px; border:1px solid #999; background-color:#ccc; float:left; margin-right:5px;cursor:pointer;5.2 注冊(cè)頁(yè)面注冊(cè)頁(yè)面分為左右兩大部

18、分，左邊是一個(gè)框架，里面包含了用戶注冊(cè)的信息填寫(xiě)表。具體內(nèi)容如下：錄入信息：（1）用戶名（4-30位字符，可包含中文、英文常用字符，不允許使用特殊字符，一旦確定，不可更改）（2）登錄密碼（6-16位字符，可包含中文、英文常用字符，區(qū)分大小寫(xiě)）（3）郵箱（本人長(zhǎng)期使用的有效郵箱，用于接收賬戶激活郵件）（4）電話（本人長(zhǎng)期使用有效的號(hào)碼）（5）公司（填寫(xiě)本人所在公司名稱）（6）地址（填寫(xiě)所在公司地址）。圖5.2 注冊(cè)頁(yè)面左邊上部分代碼為如下：<div class="title"><span class="title_icon"><

19、;img src="images/bullet1.gif" alt="" title="" /></span>注冊(cè)</div> <div class="feat_prod_box_details"><p class="details"> 歡迎光臨滁州潤(rùn)澤圖書(shū)有限公司官網(wǎng)！請(qǐng)注冊(cè)本公司會(huì)員的客戶認(rèn)真填寫(xiě)以下條目（勿用虛假信息）。注冊(cè)以后，我們將會(huì)發(fā)送一封郵件到您的郵箱，里面包括您的用戶名和密碼，還有修改密碼的鏈接，請(qǐng)注意查收. </p&g

20、t;CSS代碼如下：.feat_prod_box_detailspadding:10px 0 10px 0;margin:0 20px 10px 0;clear:both;左邊下部分的框架部分代碼如下：<p class="details"> 歡迎光臨滁州潤(rùn)澤圖書(shū)有限公司官網(wǎng)！請(qǐng)注冊(cè)本公司會(huì)員的客戶認(rèn)真填寫(xiě)以下條目（勿用虛假信息）。注冊(cè)以后，我們將會(huì)發(fā)送一封郵件到您的郵箱，里面包括您的用戶名和密碼，還有修改密碼的鏈接，請(qǐng)注意查收.</p><div class="contact_form"><div class=&q

21、uot;form_subtitle">創(chuàng)建新賬戶</div><form name="register" action="#"><div class="form_row"><label class="contact"><strong>用戶名:</strong></label><input type="text" class="contact_input" /><

22、/div><div class="form_row"><label class="contact"><strong>密碼:</strong></label><input type="text" class="contact_input" /></div><div class="form_row"><label class="contact"><strong&

23、gt;郵箱:</strong></label><input type="text" class="contact_input" /></div><div class="form_row"><label class="contact"><strong>電話:</strong></label><input type="text" class="contact_input&quo

24、t; /></div><div class="form_row"><label class="contact"><strong>公司:</strong></label><input type="text" class="contact_input" /></div><div class="form_row"><label class="contact">

25、;<strong>地址:</strong></label><input type="text" class="contact_input" /></div><div class="form_row"><div class="terms"><input type="checkbox" name="terms" />我同意 <a href="#">以上條

26、款</a></div></div><div class="form_row"><input type="submit" class="register" value="注冊(cè)" /></div></form></div></div><div class="clear"></div>CSS代碼如下：.contact_formwidth:355px;float:left;

27、padding:25px;margin:20px 0 0 15px;_margin:20px 0 0 5px;border:1px #DFD1D2 dashed;position:relative;.form_rowwidth:200px;_width:200px;clear:both;padding:10px 0 10px 0;_padding:5px 0 5px 0;color:#a53d17;5.3 留言頁(yè)面注冊(cè)頁(yè)面分為左右兩大部分，左邊是一個(gè)框架，里面包含了留言的信息填寫(xiě)表。具體內(nèi)容如下：錄入信息：（1）用戶名（4-30位字符，可包含中文、英文常用字符，不允許使用特殊字符，一旦確定，不

28、可更改），（2）登錄密碼（6-16位字符，可包含中文、英文常用字符，區(qū)分大小寫(xiě)）（3）郵箱（本人長(zhǎng)期使用的有效郵箱，用于接收賬戶激活郵件）（4）電話（本人長(zhǎng)期使用有效的號(hào)碼）（5）公司（填寫(xiě)本人所在公司名稱）（6）地址（填寫(xiě)所在公司地址）（7）留言內(nèi)容（輸入有效內(nèi)容，勿要留言與本人或公司無(wú)關(guān)的言論）圖5.3 留言頁(yè)面左邊上部分代碼為如下：<div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="&

29、quot; title="" /></span>注冊(cè)</div> <div class="feat_prod_box_details"><p class="details"> 歡迎光臨滁州潤(rùn)澤圖書(shū)有限公司官網(wǎng)！請(qǐng)注冊(cè)本公司會(huì)員的客戶認(rèn)真填寫(xiě)以下條目（勿用虛假信息）。注冊(cè)以后，我們將會(huì)發(fā)送一封郵件到您的郵箱，里面包括您的用戶名和密碼，還有修改密碼的鏈接，請(qǐng)注意查收. </p>CSS代碼如下：.feat_prod_box_detailspadding:10px 0 10px

30、 0;margin:0 20px 10px 0;clear:both;左邊下部分代碼如下：<div class="feat_prod_box_details"><p class="details"> 滁州潤(rùn)澤圖書(shū)歡迎你光臨！如要聯(lián)系我們請(qǐng)?zhí)顚?xiě)以下內(nèi)容留言給我們。無(wú)法留言的客戶，請(qǐng)按以下聯(lián)系方式聯(lián)系我們。我們的地址是安徽省滁州市瑯琊區(qū)豐樂(lè)大道2188號(hào)。電話傳真是01082551911。 </p><div class="contact_form"><div

31、 class="form_subtitle">以下必須填寫(xiě)</div> <div class="form_row"><label class="contact"><strong>姓名:</strong></label><input type="text" class="contact_input" /></div> <div class="form_row">&l

32、t;label class="contact"><strong>郵箱:</strong></label><input type="text" class="contact_input" /></div><div class="form_row"><label class="contact"><strong>電話:</strong></label><input typ

33、e="text" class="contact_input" /></div><div class="form_row"><label class="contact"><strong>公司:</strong></label><input type="text" class="contact_input" /></div><div class="form_row

34、"><label class="contact"><strong>留言:</strong></label><textarea class="contact_textarea" ></textarea></div><div class="form_row"><a href="#" class="contact">發(fā)送</a> </div> </d

35、iv> </div>CSS代碼如下：label.contactwidth:75px;float:left;font-size:12px;text-align:right;padding:4px 5px 0 0;color: #333333;input.contact_inputwidth:253px;height:18px;background-color:#fff;color:#999999;border:1px #DFDFDF solid;float:left;5.4 圖書(shū)資訊頁(yè)面圖書(shū)資訊頁(yè)面分為左右兩大部分，左邊上部分是熱銷(xiāo)圖書(shū)。右邊下部分的資訊用了選項(xiàng)卡特效。頁(yè)面包含

36、潤(rùn)澤圖書(shū)公司的最新資訊，客戶可以通過(guò)該頁(yè)面了解圖書(shū)最新的打折優(yōu)惠、圖書(shū)粗徐等資訊。圖5.4 圖書(shū)資訊頁(yè)面熱銷(xiāo)圖書(shū)的部分代碼如下：<div class="feat_prod_box"<divclass="prod_img"><ahref="details.html"><img src="images/prod1.gif" alt="" title="" border="0" /></a></div&

37、gt;<div class="prod_det_box"><div class="box_top"></div><div class="box_center"><div class="prod_title">商品名稱</div><p class="details">羽泉，15年再生羽凡知道只要自己活著，他就會(huì)站在海泉身邊，和他永不分離，如果讓他保證，這世上只有一個(gè)人是和自己不棄不離的，可能不是媳婦，而是胡海泉&l

38、t;/p><a href="details.html" class="more">- 更多 -</a><div class="clear"></div></div><div class="box_bottom"></div></div> <div class="clear"></div></div>CSS代碼如下：.prod_det_boxwidth:295p

39、x;float:left;padding:0 0 0 25px;position:relative;.box_topwidth:295px;height:9px;background:url(images/box_top.gif) no-repeat center bottom;選項(xiàng)卡部分代碼如下：<div class="bookList"><div class="title"><ul><li><a>打折優(yōu)惠</a></li><li>|</li>&

40、lt;li><a>熱賣(mài)新書(shū)</a></li><li>|</li><li><a>經(jīng)典必讀</a></li></ul></div><div class="content"><div><ul><li><a class="pic" href="#"><img src="images/逆流而上.jpg" width=&quo

41、t;90" height="125"/></a><a href="#">逆流而上</a><span class="price">售價(jià)：<em>20&#65509;</em></span><span class="intro">簡(jiǎn)介：逆流而上羽泉，15年再生羽凡知道只要自己活著，他就會(huì)站在海泉身邊，和他永不分離，如果讓他保證泉。</span></li>CSS代碼如下：.boo

42、kList .title height:40px; font-size:14px; line-height:20px; overflow:hidden; .bookList .title span float:left; font-size:16px;font-family:"黑體"font-weight:bold;.bookList .title li float:left;margin:0 20px; .bookList .title li a display:block; padding:0 5px; text-decoration:none;cursor:point

43、er; .bookList .title li a:hover color:#454545;background:url(./images/title_bg_hover.jpg) repeat-x 0 0;5.5 圖書(shū)分類頁(yè)面 圖書(shū)分類頁(yè)面分為左右兩大部分。左邊頁(yè)面將書(shū)籍進(jìn)行了分類展示，便于客戶進(jìn)行選擇購(gòu)買(mǎi)。 圖5.5 圖書(shū)分類頁(yè)面左邊部分代碼如下： <div class="new_prod_box"><a href="details.html">百年孤獨(dú)</a><div class="new_prod

44、_bg"><a href="details.html"><img src="images/百年孤獨(dú).jpg" width="80" height="90" alt="" title="" class="thumb" border="0" /></a></div> </div><div class="new_prod_box">&l

45、t;a href="details.html">泰戈?duì)栐?shī)集</a><div class="new_prod_bg"><span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span><a href="details.html"><img src="images/泰戈?duì)?jp

46、g" width="60" height="90" alt="" title="" class="thumb" border="0" /></a></div> </div> CSS代碼如下：.new_prod_boxfloat:left;text-align:center;padding:10px;.new_prod_box apadding:5px 0 5px 0;color: #000;text-decoration:n

47、one;display:block; 5.6 我的圖書(shū)頁(yè)面我的圖書(shū)頁(yè)面分為左右兩大部分。左邊頁(yè)面是客戶的登錄頁(yè)面。客戶可以通過(guò)該頁(yè)面進(jìn)行登錄，管理自己的個(gè)人資料，也可以通過(guò)賬戶進(jìn)入購(gòu)物車(chē)。圖5.6 我的圖書(shū)頁(yè)面部分代碼如下：<div class="contact_form"><div class="form_subtitle">登錄你的圖書(shū)賬戶</div><form name="register" action="#"> <div class="for

48、m_row"><label class="contact"><strong>用戶名:</strong></label><input type="text" class="contact_input" /></div> <div class="form_row"><label class="contact"><strong>密碼:</strong></lab

49、el><input type="text" class="contact_input" /></div> <div class="form_row"><div class="terms"><input type="checkbox" name="terms" />記住我</div></div> <div class="form_row"><input

50、 type="submit" class="register" value="登錄/></div> </form> </div> </div><div class="clear"></div>CSS代碼如下：.form_subtitleposition:absolute;top:-11px;left:7px;width:auto;height:20px;background-color:#795636;text-align:center;paddi

51、ng:0 7px 0 7px;color:#FFFFFF;font-size:11px;line-height:20px;5.7 特別推薦頁(yè)面 特別推薦頁(yè)面分為左右兩大部分，左邊頁(yè)面是我們將當(dāng)下最新、最熱的以及最經(jīng)典、最熱門(mén)的書(shū)籍推薦給讀者。 圖5.7 特別推薦頁(yè)面部分代碼如下：<div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" />

52、</span>特別推薦</div><div class="feat_prod_box"><div class="prod_img"><a href="details.html"><img src="images/最小說(shuō).jpg" width="100" height="150" alt="" title="" border="0" /></

53、a></div><div class="prod_det_box"><span class="special_icon"><img src="images/special_icon.gif" alt="" title="" /></span><div class="box_top"></div><div class="box_center"><div

54、 class="prod_title">最小說(shuō)</div><p class="details">最小說(shuō)是一本青春文學(xué)雜志，主編郭敬明，2006年10月份全面上市，該雜志以青春題材小說(shuō)為主，資訊娛樂(lè)以及年輕人心中的流行指標(biāo)為輔，旨在刊登最優(yōu)秀最精彩的小說(shuō).力求打造成年輕讀者和學(xué)生最喜歡的課外閱讀雜志.最小說(shuō)從2006年到2008年都是每月一刊，2009初的時(shí)候開(kāi)始每月兩刊，但是從2010開(kāi)始又恢復(fù)每月一刊</p><a href="details.html" class="more">- 更多 -</a><div class="clear"></div></div><div class="box_bo