河南農(nóng)業(yè)大學(xué)本科生畢業(yè)論文（設(shè)計）題目 圖書出版網(wǎng)站的前端設(shè)計與制作學(xué)院 信息與管理科學(xué)學(xué)院專業(yè)班級 計算機科學(xué)與技術(shù)（軟件工程2班）學(xué)生姓名 郭懷遠（1307101106）指導(dǎo)教師高瑞撰寫日期：二0一七年五月十五日TOC\o"1-5"\h\z\o"CurrentDocument"1引言 1\o"CurrentDocument"2前端開發(fā)環(huán)境及相關(guān)技術(shù) 2\o"CurrentDocument"前端開發(fā)環(huán)境 2\o"CurrentDocument"前端開發(fā)相關(guān)技術(shù) 2JavaScript簡介 2CSS簡介 2JQuery簡介 32.3.4DOM簡介 3\o"CurrentDocument"3前端頁面效果圖設(shè)計 3\o"CurrentDocument"簡潔化 3\o"CurrentDocument"視覺效果 4交互性 4\o"CurrentDocument"點線的運用 5\o"CurrentDocument"關(guān)系結(jié)構(gòu) 6\o"CurrentDocument"表達主旨 7\o"CurrentDocument"4前端頁面實現(xiàn) 8\o"CurrentDocument"分層開發(fā) 8\o"CurrentDocument"代碼編寫 8內(nèi)部測試與后續(xù)優(yōu)化 9\o"CurrentDocument"頁面成果展示 10\o"CurrentDocument"5前端頁面的一些技術(shù)實現(xiàn)詳析 12\o"CurrentDocument"列表展示區(qū) 13\o"CurrentDocument"首頁banner焦點圖 14\o"CurrentDocument"圖書目錄的收縮與展開 14\o"CurrentDocument"圖書展示的選項卡 16\o"CurrentDocument"6結(jié)語 1618圖書出版網(wǎng)站的前端設(shè)計與制作郭懷遠信息與管理科學(xué)學(xué)院計算機科學(xué)與技術(shù)專業(yè)摘要：隨著圖書出版行業(yè)的規(guī)模壯大和快速發(fā)展，圖書的在線出版和銷售成為種新的形勢和需求，圖書出版網(wǎng)站在這一?背景下應(yīng)運而生，基于此，本文結(jié)合Sublime，Photoshop等Web前端設(shè)計工具，利用JavaScript，CSS，div等技術(shù)來對圖書出版網(wǎng)站的Web前端進行了視覺效果和內(nèi)容規(guī)劃設(shè)計，包括效果圖的制作，視覺和顏色的搭配及各種頁面的布局和js動態(tài)交互動態(tài)內(nèi)容的呈現(xiàn)，完成了圖書出版網(wǎng)站首頁、電子書城、數(shù)字圖書館、移動閱讀、新聞動態(tài)、圖書期刊、人才招聘等模塊的靜態(tài)頁面效果和動態(tài)腳本制作。關(guān)鍵詞：網(wǎng)頁制作；前端；Ajax；UIFrontPagesDesignandProductionoftheBookPublicationWebsiteAbstract:ThedevelopmentofWebfrontendismadeofwebpage,andhasobviousfeaturesofthetimes..WebproductionistheproductoftheWeb1times,thewebsitetostaticcontent,theuserusesthewebsitebehavioralsotobrowsethemain.After2005,theInternetintotheWeb2era,Ajaxbringsnorefreshdatainteraction,reducethenumberofwebpagesjump.Thisarticleplansthroughsublime,toolssuchasPhotoshopwithJavaScript,CSStechnologytoachieveabookpublishingwebsitefront-end,includingrenderingsoftheproduction,allpagelayoutandJSdynamicinteractivecontent.Keywords：Webpage;Frontwebsite;Ajax;UI1引言在當(dāng)前互聯(lián)網(wǎng)盛行的前提下，Web前端技術(shù)也越來越成熟，從之前的表格布局到CSS2.0,再到CSS3.0，以及現(xiàn)在將要普及的html5。Web前端在整個網(wǎng)站建設(shè)中的作用也越來越明顯，其地位也越來越突出。一個好的網(wǎng)站體驗離不開web前端的設(shè)計與制作，突出的互聯(lián)網(wǎng)應(yīng)用將發(fā)揮廣告宣傳、咨詢洽談、網(wǎng)上付款、電子賬戶、服務(wù)傳遞、意見征詢和交易管理等作用［1］相應(yīng)的前端開發(fā)環(huán)境與相關(guān)技術(shù)也變得越來越重要。2前端開發(fā)環(huán)境及相關(guān)技術(shù)前端開發(fā)環(huán)境前端的開發(fā)離不開相關(guān)工具的配合，開發(fā)使用的工具主要有：SublimeTextAdobeDreamweaveAdobePhotoshop前端開發(fā)相關(guān)技術(shù)JavaScript簡介JavaScript是動態(tài)類型語言，當(dāng)然它也是弱類型的，并且javascript的面向?qū)ο笫腔?prototyoe-based)實現(xiàn)的。在目前所有的主流瀏覽器上，它是唯一一種瀏覽器支持的腳本語言，主要作用是：在不與服務(wù)器交互的情況下，修改html頁面內(nèi)容，并且其最關(guān)鍵的部分是DOM(文檔對象模型)[2]DIV+CSS簡介很久之前，web工程師通過table進行頁面布局，現(xiàn)在頁面布局大都推薦div+css方式。所謂的div+css是通過css控制div的布局。實際應(yīng)用不僅是div,還有p,span,img,table等任意節(jié)點的定位都可以通過css來控制。塊級元素：諸如段落、標(biāo)題、列表、表格、DIV和BODY等元素都是塊級元素。內(nèi)聯(lián)元素：如A、EM、SPAN元素及大多數(shù)的替換元素，如圖像和表單輸入的元素。他們不必在新行上顯示，也不強迫其他元素在新行上顯示，而且可以作為任何其他元素的子元素。：在HTML中包含LI元素.他們類似于書簽，用于特殊的表示場合(如圓點、字母或數(shù)字)。如果列表項元素出現(xiàn)在某種有序列表中，則具有順序性。因此在有序列表中的列表項能依據(jù)上下文自動編號[3]

margin-topborder-topboa-elr—IHqhi1LJ94UODHd-nq—IT-GITtuonoq-Duipped哥-Tboa-elr—IHqhi1LJ94UODHd-nq—IT-GITtuonoq-Duipped哥-TD.EPPEQ生OJl』IDp』tDq土Q—uDJEluuopoq-jspjoq

uopoq-ui6jeiu圖1盒模型解析圖JQuery簡介Jquery是javascript的一種框架，能夠快速搭建頁面整體布局與功能。Jquery框架的理念是：寫出更少的代碼，實現(xiàn)更多的功能。它屬于輕量級的javascript庫，它有著其他javascript庫所無法替代的功能，它還兼容CSS4，并且兼容當(dāng)前主流瀏覽器（chrome，fixfire3.0+，IE2.0+）。jquery能使用戶通過DOM方便的修改HTML各個節(jié)點的元素與增添新的功能⑷。2.3.4DOM簡介DOM不是一種語言，而是W3C平臺提供的標(biāo)準(zhǔn)API，類似于數(shù)據(jù)結(jié)構(gòu)中的樹。通知樹的節(jié)點、子節(jié)點、父節(jié)點、層層操控各個元素的一種API。DOM是與平臺、編程語言無關(guān)的一種接口，使你可以操作當(dāng)前頁面的其他組件。DOM被分為不同的部分（核心、XML及HTML）和級別（DOMLevel1/2/3）⑸。3前端頁面效果圖設(shè)計簡潔化對于大部分網(wǎng)站的前端頁面來說，就是為了滿足用戶的獲取信息的需求，所以要目標(biāo)明確、行為直接。在設(shè)計首頁的時候，要力求整體簡潔、樸素，色彩搭配均衡、和諧、頁面布局大方，而且一定要注意協(xié)調(diào)、合理，字間距、行間距適度。同時，要強化網(wǎng)站的功能，切不可讓圖片背景圖太過炫目，因此要屏棄雜亂無章圖片、背景等，讓用戶在第一眼時不會受到過多的干擾，舒心的了解網(wǎng)站的功能。本網(wǎng)站首頁的設(shè)計分為頁頭、search、導(dǎo)航、面包屑、側(cè)邊欄、內(nèi)容、新聞動態(tài)和頁腳等欄目，結(jié)構(gòu)清晰。中間部位采用典型的三欄式限寬布局，這樣呈現(xiàn)出來的結(jié)構(gòu)極為整潔，又不失顯示龐大內(nèi)容的功能。中間部位在實際制作時是為流式布局的一種，其高度會隨著內(nèi)容的增加而增加，符合實際開發(fā)的需要。導(dǎo)航部位實際為通欄布局，這樣能容納更多的目錄項，又顯得大氣簡潔。首頁由8個功能區(qū)構(gòu)成：頁頭、主導(dǎo)航欄、面包屑導(dǎo)航、圖書分類欄、熱書展示區(qū)、主編推薦欄、戰(zhàn)略合作欄和頁腳。頭部：所有的網(wǎng)站都會設(shè)置此類目，但內(nèi)部的模塊各有不同。該網(wǎng)站頭部包括網(wǎng)站logo、搜索框以及“我的訂單”等共同構(gòu)成，這幾個構(gòu)成要素根據(jù)本網(wǎng)站需求規(guī)劃書所設(shè)置，同時也符合當(dāng)前主流網(wǎng)站構(gòu)成的基本要素要求。主導(dǎo)航欄：導(dǎo)航可以看做是對網(wǎng)站內(nèi)容的分類，把網(wǎng)站的內(nèi)容進行細(xì)分，方便用戶根據(jù)個人需求選擇瀏覽相應(yīng)欄目頁面。首頁導(dǎo)航要做到分類清晰，導(dǎo)航欄目間不重復(fù)。該欄目設(shè)計為通欄顯示，是首頁最為醒目、顯眼之處，采用藍底白字搭配，hover時背景深藍顯示，符合網(wǎng)站的整體風(fēng)格[6]頁頭logo+search導(dǎo)航面包屑內(nèi)容新聞動態(tài)頁腓圖2首頁結(jié)構(gòu)劃分圖視覺效果視覺要素是現(xiàn)代網(wǎng)頁又一個重要的表現(xiàn)方法，各種顏色組合和網(wǎng)頁結(jié)構(gòu)排列展現(xiàn)出是不同的款式?；旧侠渖{(diào)可以用來表現(xiàn)大方利落的風(fēng)格，而暖色調(diào)則在表現(xiàn)時尚、流行等時尚元素上比較明顯。許多人在進行網(wǎng)站設(shè)計的時候都只考慮自己的想法，忘記了網(wǎng)站用戶的感受，比如有人比較喜歡紅色，于是在整個網(wǎng)站中都布局紅色背景，雖然你看起來舒服了，但是將網(wǎng)站設(shè)計一個模型之后讓別人都來看一看，看看網(wǎng)站設(shè)計是否能夠第一時間吸引住他們，如果連你的身邊的

人都不能夠留住，那么說明你的網(wǎng)站設(shè)計還必須進行修改，而我們的視覺效果就是要在不斷修改的背景之下完成，讓更多的人證明你的網(wǎng)站視覺設(shè)計確實吸引人[8]由于網(wǎng)站屬于內(nèi)容較多的電子商務(wù)系列圖書網(wǎng)站，類似于當(dāng)當(dāng)網(wǎng)，內(nèi)容量過于龐大，顏色把握不好很容易顯得凌亂不堪，為了避免此問題保持干凈清爽的頁面，首先要控制不同顏色的數(shù)量，故本網(wǎng)站的主色調(diào)為藍色，并以顏色為基礎(chǔ)進行不同層度的加深或減淡，內(nèi)容區(qū)域文字顏色為深灰色并配合特殊背景下的白色，顯得較為干凈整潔，圖3為首頁部分區(qū)域截圖。您好！歡迎來到鄭州大學(xué)出版社?。鄣卿洠荩勖赓M注冊］English石油開發(fā)X我的訂單石油開發(fā)X我的訂單-購物車熱門搜索：箭200成100兒童節(jié)^券童書19折起兒童節(jié)唯品會數(shù)字圖書館肺gm首頁》圖書〉計算機科學(xué)與技術(shù)》母校＞圖書分類電子書計算機石油地質(zhì)與勘探石油開發(fā)石油物探：石油測井石油鉆井錄井、試井、測試地面工程I石油機械煉油、化工其他I能源戰(zhàn)略石油經(jīng)濟企業(yè)管理科技管理科技管理?企業(yè)文化?管理類質(zhì)里IHSE節(jié)能標(biāo)準(zhǔn)化I新書上架移動閱讀新聞動態(tài)朗硼刊數(shù)字圖書館肺gm首頁》圖書〉計算機科學(xué)與技術(shù)》母校＞圖書分類電子書計算機石油地質(zhì)與勘探石油開發(fā)石油物探：石油測井石油鉆井錄井、試井、測試地面工程I石油機械煉油、化工其他I能源戰(zhàn)略石油經(jīng)濟企業(yè)管理科技管理科技管理?企業(yè)文化?管理類質(zhì)里IHSE節(jié)能標(biāo)準(zhǔn)化I新書上架移動閱讀新聞動態(tài)朗硼刊人才招聘最新動態(tài)積分支付上線了，直接當(dāng)錢用端午撞六一，禮品卡據(jù)惠農(nóng)大，再見咽安大，這次真的再見了?河南農(nóng)大，這次真的真的再見了最新動態(tài)更多圖書SQLSERVE瞰程作者:張林森編著￥30.00編輯推薦榜石油圖書大眾圖書電子書史志年鑒辭書moSQLSERVE史志年鑒辭書moSQLSERVE瞰程圖3首頁部分區(qū)域顏色配置展示圖圖4展示的是頁面首頁圖書編輯推薦的功能截圖。編輯推薦榜計算機圖書大眾圖書電子書SQLSERVE瞰程作者:XXSQLSERVE瞰程作者:XX編著￥30.002SQLSERVE瞰程2SQLSERVE瞰程SQLSERVE瞰程圖4編輯推薦榜3.5點線的運用大多數(shù)在內(nèi)容多樣的的網(wǎng)頁上為了可以讓瀏覽者更輕松的找到他們想要的

東西，點線的指引作用必不可少，圖5為網(wǎng)頁中點線的使用圖例。石油科技油田開發(fā)基礎(chǔ)開發(fā)地質(zhì)油氣-T程采油氣工程力晌成為機構(gòu)用戶開通機構(gòu)賬戶力晌成為機構(gòu)用戶開通機構(gòu)賬戶簽署含同部署朋勞器內(nèi)部管理?聯(lián)系電話聯(lián)系地址:河南省鄭州市大學(xué)路如號圖5點線使用圖關(guān)系結(jié)構(gòu)圖6中左側(cè)清晰明了，右側(cè)則層次不清晰。A表示頭部，B表示背景，C表示右側(cè)內(nèi)容詳細(xì)區(qū)，D為產(chǎn)品區(qū)。錯誤的布局正確的層次布局錯誤的布局圖6結(jié)構(gòu)層次對比圖圖7是網(wǎng)頁中上面講到結(jié)構(gòu)的體現(xiàn)，分別為導(dǎo)航區(qū)、面包屑、左邊欄、內(nèi)容區(qū)，層次分明。

石本冊發(fā)熱門搜索：石油開發(fā)石油開發(fā)石油開發(fā)石油開發(fā)石油開發(fā)紙質(zhì)書油田開發(fā)基礎(chǔ)開皮地質(zhì)水^#壓 爸技術(shù)售價:定價：油氣臟工程采油氣工程圖書出版油田開發(fā)基礎(chǔ)作者：中國石油勘探與生產(chǎn)分公司出版日期:2011-12-24本書簡要介紹了水平井增產(chǎn)改造技術(shù)需求、水平井增產(chǎn)改造技術(shù)發(fā)展歷程、水平井分段壓裂酸化改造技術(shù)展望,重點介紹水:平井完井技術(shù)、水平井分驗壓裂優(yōu)化設(shè)計方法、水平井涸……顧客評伯?★★★★★（已有1口口.人評價）堂免費試讀通口人購物車瞰藏開發(fā)地質(zhì)油氣臟工程采油氣工程懸贊小說油田開發(fā)基礎(chǔ)開發(fā)地質(zhì)油氣臟工程至沖與丁辭石本冊發(fā)熱門搜索：石油開發(fā)石油開發(fā)石油開發(fā)石油開發(fā)石油開發(fā)紙質(zhì)書油田開發(fā)基礎(chǔ)開皮地質(zhì)水^#壓 爸技術(shù)售價:定價：油氣臟工程采油氣工程圖書出版油田開發(fā)基礎(chǔ)作者：中國石油勘探與生產(chǎn)分公司出版日期:2011-12-24本書簡要介紹了水平井增產(chǎn)改造技術(shù)需求、水平井增產(chǎn)改造技術(shù)發(fā)展歷程、水平井分段壓裂酸化改造技術(shù)展望,重點介紹水:平井完井技術(shù)、水平井分驗壓裂優(yōu)化設(shè)計方法、水平井涸……顧客評伯?★★★★★（已有1口口.人評價）堂免費試讀通口人購物車瞰藏開發(fā)地質(zhì)油氣臟工程采油氣工程懸贊小說油田開發(fā)基礎(chǔ)開發(fā)地質(zhì)油氣臟工程至沖與丁辭水平井壓碗化改苣技術(shù)售價:定價:作者：中國石油勘探與生產(chǎn)分公司出版日期:20H-12-24本書簡要介紹了水平井增產(chǎn)改造技術(shù)需求、水平井增產(chǎn)改造技術(shù)發(fā)展歷程、水平井分段壓裂酸化改造技術(shù)展望,重點介紹水平井完井技術(shù)、水平井分段壓裂優(yōu)化設(shè)計方法、水平井取……顧客評介*★**★（已有1口口人評侑）^免噩試讀通口入購物車卅牧藏圖7結(jié)構(gòu)層次舉例表達主旨在制作頁面的時候不僅要完整的實現(xiàn)功能，更重要的是把要表達的中心思想呈現(xiàn)給客戶。在表達意思的時候要清楚，直接點明，不要過于隱晦。圖8就以首頁為例加以說明。管理類管理類質(zhì)量|HSE|節(jié)能|標(biāo)準(zhǔn)化|音樂類史志年鑒，辭書計算機信息技術(shù)I專業(yè)外語算法設(shè)計石油科普通用工具書I法律其他8Delphi~編程教程?niAfi^aiiKsM高等教育高職教盲職業(yè)鑒定I職壯培訓(xùn)觸教程高瑞￥7.00算法設(shè)計高瑞￥8,00孵顆高瑞￥990高瑞￥11.00高中裁材英語生活社科綜合1文學(xué)音樂類史志年鑒，辭書計算機信息技術(shù)I專業(yè)外語算法設(shè)計石油科普通用工具書I法律其他8Delphi~編程教程?niAfi^aiiKsM高等教育高職教盲職業(yè)鑒定I職壯培訓(xùn)觸教程高瑞￥7.00算法設(shè)計高瑞￥8,00孵顆高瑞￥990高瑞￥11.00高中裁材英語生活社科綜合1文學(xué)經(jīng)濟管理教育計算機其他!幼兒教材物探專業(yè)I地質(zhì)專業(yè)I鉆井專業(yè)I測井專業(yè)I開發(fā)專業(yè)采油采氣專業(yè)1儲運專業(yè)I工程建設(shè)I設(shè)備和工具I多媒體技木教程

rundamcntulw

ofMultimedia實用教程電子支忖

與網(wǎng)的行多媒體技術(shù)教程高瑞￥12,00jara實用教程高瑞￥13.00電子支付與網(wǎng)8銀行高瑞/span）￥14.00管材專業(yè)I儀器儀表專業(yè)I首頁效果圖中間部分右首頁為明顯的左中右布局，左邊“圖書分類”表示導(dǎo)航索引區(qū)，分為“banner展示區(qū)”和“新書上架”，右側(cè)分為“最近動態(tài)”和“編輯推薦榜”，層次分明，主旨清晰。這樣布局的目的是更大限度展示內(nèi)容的同時又保持了頁面的清晰美觀。中間部分右4前端頁面實現(xiàn)分層開發(fā)分層開發(fā)主要涉及：基本樣式（base）、通用樣式（common）、頁面樣式（page）。其中base樣式為最基礎(chǔ)的樣式，包括字體大小，大致框架等。通用樣式本身屬于模塊級，包括導(dǎo)航欄、留言板、網(wǎng)頁底層結(jié)構(gòu)，可以供各個頁面使用。page樣式屬于頁面級的⑼。分層開發(fā)正是通過圖9來一步步實現(xiàn)的。圖9分層開發(fā)概況圖代碼編寫前期網(wǎng)站布局做好以后，下面就進入代碼編寫階段，基本流程為總體規(guī)劃好網(wǎng)站大致樣式后，就明確分工進行網(wǎng)站前端各個細(xì)節(jié)工作，包括美工設(shè)計，圖片查找，框架構(gòu)建，頁面設(shè)計。當(dāng)大致工作完成后，進行測試，最后進行頁面細(xì)節(jié)的完善，最終將完善后的頁面交給后端網(wǎng)站開發(fā)、完成網(wǎng)站后臺開發(fā)制作，確保開發(fā)網(wǎng)站能節(jié)約時間并能進行二次開發(fā)［10］。大致規(guī)劃如下：確定了網(wǎng)站制作流程后還需要對網(wǎng)站原型細(xì)節(jié)進行分析，拆分，把反復(fù)使用的部分挑出來制作成代碼模塊，方便以后再遇到類似情況的代碼的套用。確認(rèn)二，三級網(wǎng)頁的格調(diào)搭建相一致框架。前臺頁面CSS樣式確定以后，就進行通用板塊CSS的設(shè)計（包括單選框，button，字體大小，默認(rèn)字體顏色，背景圖片以及顏色等），完成后并提交給前端，前端制作人員再根據(jù)整體內(nèi)容來進行制作。在代碼編寫的過程中，最重要的是有自己規(guī)范的代碼編寫準(zhǔn)則，在編寫HTML時候根據(jù)頁面的設(shè)計充分發(fā)揮自己的想象來完成頁面功能的實現(xiàn)。圖10展示了代碼編寫的流程。PRDprototype，碼編寫二前端制作（HTML）?一-J1頁面設(shè)計前端制作（樣式完善）提交開發(fā)圖10代碼編寫概況圖網(wǎng)站測試與二次開發(fā)、優(yōu)化當(dāng)網(wǎng)站細(xì)節(jié)修改完畢后，就需要進行網(wǎng)站制作的優(yōu)化以確保代碼的最優(yōu)化，盡可能減少代碼量來完成網(wǎng)站所有功能并且減少相應(yīng)的HTTP請求。圖11表示網(wǎng)站內(nèi)部測試流程。設(shè)計參與測試內(nèi)部賽演與后續(xù)優(yōu)化 整體測試~ 后續(xù)代碼優(yōu)化圖11內(nèi)部測試概況圖圖12表示了前端頁面開發(fā)流程。圖12前端開發(fā)簡略流程圖頁面開發(fā)流程一旦制定出來就必須要求前端制作按照此流程圖來一步步制作，然后再經(jīng)過長時間的增改跟磨合。即使不是很完善，但是很適合我們現(xiàn)在網(wǎng)站制作的需求，當(dāng)然優(yōu)點也是非常明顯的，遵循頁面開發(fā)流程并使用它對我們的網(wǎng)站制作有非常大的益處，能更好的應(yīng)對高強度，高質(zhì)量的開發(fā)需要。代碼更可控，開發(fā)效率更高。其實有很多種渠道會讓一個網(wǎng)站的外觀更讓人欣賞，在制作網(wǎng)站時也會有不同的設(shè)計趨勢。隨著互聯(lián)網(wǎng)發(fā)展，現(xiàn)在網(wǎng)站成為很多人獲取信息的渠道，因此制作網(wǎng)站時應(yīng)該將用戶的感受放在第一位。經(jīng)常面對一個設(shè)計很差的網(wǎng)站是一種很差的感受，因此我們考慮將從以下幾個模塊來改善用戶體驗。.網(wǎng)站排版：創(chuàng)造性地使用排版的方式確實可以有效的使用戶可以立即得到該網(wǎng)站的新消息，特別是使用的字體是獨一無二的，顏色是比較突出的[6].圖片的切換效果研究。.網(wǎng)站性能的優(yōu)化：如果網(wǎng)站僅有美觀的頁面設(shè)計和完善的服務(wù)功能，但性能無法滿足要求，導(dǎo)致頁面延遲過長，也無法令用戶滿意。前端優(yōu)化的途徑有：（1）減少HTTP請求：一個完整的HTTP請求要包含DNS尋址、建立和服務(wù)器的連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個“漫長”而復(fù)雜的過程。（2）減少文件大?。喊▔嚎sJavaScript和CSS文件以及優(yōu)化代碼。優(yōu)化代碼包括去除不必要的html標(biāo)簽，避免內(nèi)聯(lián)式樣式以及CSS代碼優(yōu)化。（3）將樣式表放在單獨的文件中，這樣方便各個頁面調(diào)用。將script放在底部這個措施能防止頁面加載速度緩慢，防止JS加載完畢，但整體頁面還沒有完全顯示完畢，因此將樣式表放在文件中可以提高網(wǎng)頁組件的加載速度，減少頁面的加載時間，改善用戶體驗。（4）禁止發(fā)生http找不到服務(wù)器的錯誤。（5）網(wǎng)站頁面與各個瀏覽器的兼容性［11］。4.4頁面成果展示圖13展示了網(wǎng)頁首頁的效果，首頁分別由8個功能區(qū)構(gòu)成：頁頭、主導(dǎo)航欄、面包屑導(dǎo)航、圖書分類欄、熱書展示區(qū)、主編推薦欄、戰(zhàn)略合作欄和頁腳。.頭部：所有的網(wǎng)站都會設(shè)置此頭部，但內(nèi)部的模塊各有不同。該網(wǎng)站頭部包括網(wǎng)站logo、搜索框以及“我的訂單”等構(gòu)成要素，這幾個構(gòu)成要素根據(jù)本網(wǎng)站需求規(guī)劃書所設(shè)置，同時也符合當(dāng)前主流網(wǎng)站構(gòu)成的基本要素要求。2.主導(dǎo)航欄：導(dǎo)航可以看做是對網(wǎng)站內(nèi)容的分類，把網(wǎng)站的內(nèi)容進行細(xì)分，方便用戶根據(jù)個人需求選擇瀏覽相應(yīng)欄目頁面。首頁導(dǎo)航要做到分類清晰，導(dǎo)航欄目間不重復(fù)。欄目設(shè)計為通欄顯示，是首頁最為醒目、顯眼之處，采用藍底白字搭配，hover時背景深藍顯示，符合網(wǎng)站的整體風(fēng)格［12］。.面包屑導(dǎo)航：為了更好的傳遞站內(nèi)頁面內(nèi)容，網(wǎng)站需要設(shè)置面包屑導(dǎo)航。由于網(wǎng)站各層級的頁面較多，尤其是大型網(wǎng)站，為了更為方便的讓網(wǎng)站頁面之間傳遞信息，內(nèi)鏈?zhǔn)亲罴训姆绞剑瑸轫撁嬖O(shè)置面包屑導(dǎo)航就是最符合用戶體驗的內(nèi)鏈形式。面包屑導(dǎo)航不但可以分配頁面權(quán)重，還可以方便用戶在各層級頁面間進行切換，在一定程度上增強了用戶體驗［13］。.圖書分類欄：該欄目位于首頁的中上部，主要模塊為左側(cè)圖書分類區(qū)、中部圖書展示區(qū)和右側(cè)編輯推薦區(qū)。圖書分類欄設(shè)計風(fēng)格簡潔、醒目，迎合當(dāng)前形式下大型網(wǎng)站的設(shè)計思路，例如京東和當(dāng)當(dāng)?shù)鹊取?0石油開發(fā)X我的訂單-購物車熱門搜索：^200^100兒童節(jié)禮券童書L9折起兒童節(jié)唯品會圖書分類電子書計算機 )石油地質(zhì)與勘探，石油開發(fā)I石油物探石油則井石油鉆井錄井、試井、測試地面工程I石油機械煉油、化工I茸他I能源戰(zhàn)略石油經(jīng)濟企業(yè)管理科技管理科技管理企業(yè)文化?管理類 ：最新動態(tài)積分支付上線了，直接當(dāng)錢用湍午撞六一，禮品卡據(jù)惠農(nóng)大，再見咽農(nóng)大，這次真的再見了河南農(nóng)大，這次真的真的再見了史志年鑒石油開發(fā)X我的訂單-購物車熱門搜索：^200^100兒童節(jié)禮券童書L9折起兒童節(jié)唯品會圖書分類電子書計算機 )石油地質(zhì)與勘探，石油開發(fā)I石油物探石油則井石油鉆井錄井、試井、測試地面工程I石油機械煉油、化工I茸他I能源戰(zhàn)略石油經(jīng)濟企業(yè)管理科技管理科技管理企業(yè)文化?管理類 ：最新動態(tài)積分支付上線了，直接當(dāng)錢用湍午撞六一，禮品卡據(jù)惠農(nóng)大，再見咽農(nóng)大，這次真的再見了河南農(nóng)大，這次真的真的再見了史志年鑒辭書I計算機信息技術(shù)專業(yè)外語石油科普通用工具書法律I其他I大學(xué)教材高等教育高職教育職皿定職業(yè)培訓(xùn)I高中教材 )英語?生活I(lǐng)社科綜合文學(xué)I經(jīng)濟管理教育計算機其他幼兒教材 、，物探專丑I地質(zhì)專業(yè)I鉆井專業(yè)I測井專注I開發(fā)專業(yè)I采油采氣專業(yè)I儲運專業(yè))工程建設(shè)設(shè)備和工具管材專注儀器儀表專業(yè)I計里專注天然氣專業(yè)I文化 歷史普及讀物中國史I世界史I田史普及讀物I中國史I世界史歷史普及讀物中國史I世界史歷史普及讀物I中國史世界史軍事 歷史普及讀物I中國史I世界史歷史普及讀物中國史I世界史I歷史普及讀物中國史I世界史歷史普及讀物I中國史世界史熱血 歷史普及讀物中國史I世界史田史普及讀物：中國史世界史歷史普及讀物I中國史I世界史歷史普及讀物I中國史世界史獻石油人拗甕家的石油 幽i石油人瞬冢的石油 幽石油人斛冢的石油翁也。。 翻熬0。 睛為。。張林森 張林森 張林森￥30.00 ￥30.00 ￥30.00瞬有財物貧冢的石油雷科。。張林森￥30.00比《平凡的世界》更誠實!完整講述共和國歷史上最折騰的歲月最等數(shù)字下冊高瑞￥30.00高等數(shù)字下冊高瑞￥30.00晟薦數(shù)字下冊高瑞￥30.00曷等數(shù)字下冊高瑞￥30.00晟等數(shù)字下冊高瑞￥30.00戰(zhàn)略合作伙伴遼寧人民出版社石油工業(yè)出版社高等教育出版社清華大學(xué)出版社外語教育出版社延邊大學(xué)出版社中國華宇出版社遼寧人民出版社石油工業(yè)出版社高等教育出版社清華大學(xué)出版社外語教育出版社延邊大學(xué)出版社中國華宇出版社人民教育出版社湖南衛(wèi)視出版社西北大學(xué)出版社新華書店出版社暨南大學(xué)出版社外語教育出版社北京起航出版社人民教育出版社湖南衛(wèi)視出版社西北大學(xué)出版社新華書店出版社暨南大學(xué)出版社外語教育出版社北京起航出版社圖13首頁最終效果圖.熱書展示區(qū)：該欄目為當(dāng)下最為熱門的圖書推薦，圖書相關(guān)信息都會體現(xiàn)在圖片展示上，這樣減少了文字的過多介紹，顯得更為干凈整潔。此區(qū)在css樣式設(shè)計上默認(rèn)為百分之六十透明度，hover時百分百透明度顯示，鼠標(biāo)滑過時能起到吸引顧客的效果。11.主編推薦欄：該欄目功能是展示當(dāng)下一些較為流行熱銷的書籍，使客戶更方便且有針對性的查找。選用選項卡式自左向右設(shè)計，形成有效的視覺引導(dǎo)，能最大限度的展示圖書內(nèi)容。同時導(dǎo)航欄目左側(cè)以大字號顯示“主編推薦”，并對關(guān)鍵字襯以菱形背景，以示強調(diào)。.戰(zhàn)略合作欄：該欄目列出一些有合作的廠商鏈接，使用簡介的ul和li布局，中間用兩條不同深淺顏色的線段隔開，給人一種浮雕效果，簡潔有序[14].頁腳：網(wǎng)頁頁腳是一個經(jīng)常被忽視的地方，它經(jīng)常被遺忘，也會被使用過度，在實際制作過程中要避免大量鏈接的出現(xiàn)，字體顏色以及大小的設(shè)置都要符合網(wǎng)站的整體風(fēng)格。頁腳給出了關(guān)于網(wǎng)站的一些信息，例如版權(quán)、地址和備案號經(jīng)過這些細(xì)節(jié)的設(shè)計，最終電子商城整體效果如圖14所示。圖14電子書城頁最終效果圖5前端頁面的技術(shù)實現(xiàn)詳析實現(xiàn)前端頁面，大致使用html、div+css、javascript、ajax、jquery等技術(shù)，各個技術(shù)相輔相成，各自發(fā)揮作用，最終才能實現(xiàn)前端頁面的制作效果。以下詳細(xì)展示了網(wǎng)頁部分的細(xì)節(jié)的實現(xiàn)效果。12列表展示區(qū)計算機信息:t專也外吊16列表展示區(qū)效果大多數(shù)電商網(wǎng)站都有圖16所示子級下滑菜單效果，如京東、淘寶、當(dāng)當(dāng)?shù)鹊?，石）合史志年鑒I辭A石油科普I逋用工具書法律經(jīng)濟 歷史普及讀物1中國史I計算機信息:t專也外吊16列表展示區(qū)效果大多數(shù)電商網(wǎng)站都有圖16所示子級下滑菜單效果，如京東、淘寶、當(dāng)當(dāng)?shù)鹊?，石）合史志年鑒I辭A石油科普I逋用工具書法律經(jīng)濟 歷史普及讀物1中國史I世界史I歷史普及讀物I中國史I世界史I歷史普及讀物I中國史I世界史歷史普夫讀拗1中國史I世界史歷史 田史普及讀物1中國史I世界史I田史普族讀物I中國史I世畀史歷史普及讀物中國史?世界史歷史普及讀物?中國史?世界史中國史I世界史歷史普及讀物I中國史I世界史熱血歷史普及讀物I中國史I世界史I歷史普及讀物I中國史I世界史歷史普及讀物中國史I世界史而史普及讀物I中國史I世界史翼交1t 田史普展讀物中國史世?歷史普及讀物中國史世界史歷史普及讀物中國史世界史歷史普及:中國史世界史軍事由史普及讀物中國史世界史田史普及讀物中國史世界史歷史普及讀物此效果的使用也大大增加了展示區(qū)域的內(nèi)容。目的是點擊A區(qū)域時B區(qū)域出現(xiàn)，看似簡單的效果，其實里面的技巧和實現(xiàn)的思路有很多。例如讓B去顯示，可以用javascript中的display、opacity、position、visible方法等等。子級下滑菜單效果的html結(jié)構(gòu)并不算復(fù)雜，分為包裹區(qū)div，左側(cè)導(dǎo)航區(qū)div,右側(cè)內(nèi)容展示區(qū)div，B區(qū)域根據(jù)A區(qū)域進行絕對定位，其left值剛好為A的寬度減1，因為A區(qū)域右側(cè)1px邊框不可見，然后設(shè)置B區(qū)域的z-index值大于A區(qū)域，此目的為覆蓋住A區(qū)域右側(cè)的1px邊框，使其更好的融合在一起，美觀自然。圖17顯示了網(wǎng)頁列表制作的代碼。T<divcla55="wrap">T<divcIhss="wrap_t"> "Cspan：?圖書分類仃印日n：> 、陽*區(qū)悚</div>T<divcla55="wrap_b"><divcla55="book_l1st"> <dlclass="dl_.one"> 左曾］列表區(qū)，也是ho”「區(qū)域?class="dt_one▼<ddclass=''clearfixdd_one">aliref="/blog/#">石油地質(zhì)與勘探4fa>3liref="fittp:"/blog/#">石油機械Valiref="fittp:///blog/#">箕他4/a>::曰Fn</dd></dl> ||?<divclass="book_con"style=\顯示隱藏區(qū)域</div></div></dicI圖17列表展示區(qū)html結(jié)構(gòu)13

首頁banner焦點圖現(xiàn)在絕大多數(shù)網(wǎng)站都會有類似的banner焦點圖效果，實現(xiàn)的思路也各有差別。我的思路是改變banner區(qū)的left值，利用setinterval方法開啟定時器，讓其每隔幾秒每次變化一個banner圖的寬度，點擊下面的小導(dǎo)航原理相同。圖18展示首頁焦點圖的效果。圖18banner焦點圖效果圖Banner焦點效果圖的html結(jié)構(gòu)清晰明了，分為包裹區(qū)、計數(shù)點擊區(qū)、內(nèi)容描述區(qū)和內(nèi)容區(qū)。計數(shù)點擊區(qū)域為有序列表，分別左浮動，ol相對于包裹區(qū)絕對定位。內(nèi)容描述區(qū)和內(nèi)容區(qū)也相對于包裹區(qū)進行絕對定位。圖19展示了焦點圖的html代碼結(jié)構(gòu)。cl</div>圖19banner焦點圖html結(jié)構(gòu)圖書目錄的收縮與展開當(dāng)類目內(nèi)容較多時，收縮與展開效果的應(yīng)用就顯得尤為重要。它能更大區(qū)域14

的呈現(xiàn)內(nèi)容，方便查找，大大的增強了用戶體驗。例如圖20中的“計算機科學(xué)與技術(shù)”為一級目錄，點擊后下拉呈現(xiàn)出其包裹的類目。圖20展示了圖書目錄效果圖。紙質(zhì)書計算機科學(xué)與技術(shù)計算機網(wǎng)絡(luò)計直機編信庾倬編程語言匯編語言項目管理/a>項目管理1口口口問領(lǐng)導(dǎo)人的魅力圖20圖書目錄效果圖此效果對應(yīng)的html結(jié)構(gòu)分為包裹區(qū)div，頭部點擊區(qū)h2,點擊下拉區(qū)div，下拉區(qū)div為自適應(yīng)高度布局，其隨著類目列表的增多而增高。圖21展示了圖書目錄效果圖的實現(xiàn)代碼。▼<divclass='listcon1fl">?<h2dass="listcon_ltlistcon_linobcttom">_</Ii2>t<divid="pull"class="]iistccm_lb">點擊區(qū)域收縮展開區(qū)域?,<h3clas5="listcon_hbg">...</h3?—T<divclas5=npLJlldown">點擊區(qū)域收縮展開區(qū)域<iclass="bg"x/i></div>?<h3clas5="li5tcon_hbgaczive">,-</h3>?<diwclass="pLilldciwn"style="1di5play:none;^iv>? clas5="listcon_hbgacTive">._</li3>?<divclass="pLilldo?jn"style="1display:none;">>..</civ>? class="Listcon_hbgacTive">._</li3>圖21圖書目錄html結(jié)構(gòu)22：用jQuery實現(xiàn)此效果的代碼展示,分別用到事件綁定和一些封裝函數(shù)。$(document).ready(function(){$('#pullh3').on('click",function(){S(this).next().slideTsggle(),prev(),toggleClass('active1);$('fcortdd').on(1click'Jl-ftinctian(){5(this),addClass('actiyel1),siblines().removeClassf1activel1);?)；?)；15圖22圖書目錄js行為5.45.4圖書展示的選項卡微課加速器電子書 文本 出版社算法與數(shù)曙構(gòu)高瑞￥30.00粉解下冊高瑞￥30.00孵髓高瑞￥30.00酬解insIUSE：?SQL微課加速器電子書 文本 出版社算法與數(shù)曙構(gòu)高瑞￥30.00粉解下冊高瑞￥30.00孵髓高瑞￥30.00酬解insIUSE：?SQL}S&yer微機計算機原理高瑞￥30.00高瑞￥30.00SQLSERVE喚用教程高瑞￥30.00計算機圉形學(xué)高瑞￥30.00圖23圖書展示選項卡效果圖23為網(wǎng)站圖書展示的效果圖。圖書展示選項卡效果分為上下兩部分，上半部分為點擊區(qū)域，可以使用ul布局，下半部分為對應(yīng)呈現(xiàn)區(qū)域，可以使用div布局，由于ul下li的點擊區(qū)域數(shù)量和下面的呈現(xiàn)區(qū)div數(shù)量是一致的，故點擊li時讓對應(yīng)div顯示即可。6結(jié)語經(jīng)過近幾個月的代碼及論文書寫，畢業(yè)設(shè)計也隨之進入收尾階段，以下是我總結(jié)的幾點：.XHTML包含豐富的有意義元素，要根據(jù)語義化使用，例如段落就用p，行內(nèi)標(biāo)簽用span等，然后確定HTML，最后制定合適的CSS樣式。判斷網(wǎng)頁標(biāo)簽語義是否良好的一般標(biāo)準(zhǔn)是是：去掉樣式，看網(wǎng)頁結(jié)構(gòu)是否良好有序，是否依然有很好的可讀性，要達到這些就要盡可能少用div和span，可用p時就不要用div，語義上需要強調(diào)的文本可包在strong和em標(biāo)簽里。.關(guān)于id名和class的命名問題，要做到名稱有意義，以方便查找和后期修改，否則一旦需要維護時將非常的麻煩?？筛鶕?jù)內(nèi)容來選用合適的英文單詞，如頭部用head，導(dǎo)航用nav，菜單用menu等。命名CSS時，首先要判斷它位于什么層，若在page層，需考慮如何避免沖突，例如加前綴等。.關(guān)于選擇器的使用，包括元素選擇器、后代選擇器（兩個選擇器之間的空16格表示）、id選擇器、class選擇器、屬性選