《網(wǎng)頁設(shè)計(jì)與制作 畢業(yè)論文.doc》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)與制作 畢業(yè)論文.doc（33頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

XXXXXXXXXX學(xué)院 畢 業(yè) 論 文 論文（設(shè)計(jì)）題目： 網(wǎng)頁設(shè)計(jì)與制作 班 級： 姓 名： 學(xué) 號： 指導(dǎo)教師： 時(shí)間： 2016年 5月 30日 XXXXXXXX學(xué)院 畢業(yè)設(shè)計(jì)（論文）任務(wù)書 班級 XXXXXXXX 姓名 XX 學(xué)號 XXXXXXXX 設(shè)計(jì)（或論文）題目 網(wǎng)站設(shè)計(jì)與制作（DIV+CSS) 指導(dǎo)教師姓名 XX 指導(dǎo)教師 專業(yè)技術(shù)職稱 高級工程師 設(shè)計(jì)根據(jù)、內(nèi)容、技術(shù)要求，主要設(shè)計(jì)方法（或步驟： 利用DIV+CSS技術(shù)為某公司設(shè)計(jì)一個(gè)公司介紹和產(chǎn)品銷售的網(wǎng)站。 一、 緒論 1．國內(nèi)外電子商務(wù)發(fā)展的現(xiàn)狀 2．公司網(wǎng)站的重要性 二、DIV+CSS網(wǎng)站設(shè)計(jì)與制作技術(shù) 1. 網(wǎng)頁設(shè)計(jì)與制作的主要工具 2. DIV+CSS技術(shù)介紹 3. 網(wǎng)站制作流程 三、某公司網(wǎng)站設(shè)計(jì) 1. 確定公司創(chuàng)建網(wǎng)站的目的與意義 2. 需求分析 3. 設(shè)計(jì)工作流程 4. 欄目設(shè)計(jì) 四、公司網(wǎng)站制作 1. 設(shè)計(jì)草圖 2. 設(shè)計(jì)制作PSD模板 3. 利用DIV+CSS制作網(wǎng)站頁面 五、總結(jié)六、致謝七、參考文獻(xiàn) 設(shè)計(jì)步驟： 2016 年1月20-20 年2月20 日 學(xué)習(xí)、閱讀參考文獻(xiàn)并收集相關(guān)資料 2016年2月21日-20年月3月10日擬訂提綱 2016 年3月11日-20年4月30日撰寫初稿 2016 年5月1日-20 年5月30日修改、完善論文階段 主要參考文獻(xiàn)、資料：參考文獻(xiàn)不少于十個(gè) [1] 中華人民共和國商務(wù)部，中國電子商務(wù)報(bào)告(2014)，中國商務(wù)出版社。 [2] 《美國零售市場研究報(bào)告》，《連鎖》2014年6月刊。 [3] Ben Frain, 響應(yīng)式Web設(shè)計(jì),人民郵電出版社.2015年7月3日 [4] 李東博，《Dreamweaver+Photosho網(wǎng)頁設(shè)計(jì)》，清華大學(xué)出版社,2010 要求完成時(shí)間 2016年5月30日  XXXXXXXX學(xué)院 網(wǎng)站設(shè)計(jì)與制作（DIV+CSS) 作者姓名（XX） 內(nèi)容摘要：本文從電子商務(wù)發(fā)展出發(fā)，詳細(xì)講述了國內(nèi)外電子商務(wù)的發(fā)展已經(jīng)滲透到生活和工作的方方面面，而且電子商務(wù)技術(shù)也將成為新世紀(jì)商家不可缺少的發(fā)展道路。從電子商務(wù)的發(fā)展可以看出今后電子商務(wù)在企業(yè)中的地位，接下來將會介紹網(wǎng)站的制作流程，從設(shè)計(jì)頁面到前臺開發(fā)到后臺添加到交付給用戶使用。然后突出介紹設(shè)計(jì)和前臺開發(fā)。通過Div+Css技術(shù)來制作出能給后臺開發(fā)人員進(jìn)行開發(fā)的成品頁面。本文主要使用制作葡萄酒銷售網(wǎng)站作為例子來使用div與css技術(shù)搭建網(wǎng)站。 關(guān)鍵詞：（楷體五號）div css 售酒 網(wǎng)站 電子商務(wù) 目錄 第一章 緒論 5 第一節(jié) 國內(nèi)外電子商務(wù)發(fā)展的現(xiàn)狀 5 第二節(jié) 公司網(wǎng)站的重要性 6 第二章 DIV+CSS網(wǎng)站設(shè)計(jì)與制作技術(shù) 6 第一節(jié) 網(wǎng)頁設(shè)計(jì)與制作的主要工具 6 第二節(jié) DIV+CSS技術(shù)介紹 7 第三節(jié) 網(wǎng)站制作流程 7 第三章 某公司網(wǎng)站設(shè)計(jì) 8 第一節(jié) 確定公司創(chuàng)建網(wǎng)站的目的與意義 8 第二節(jié) 需求分析 8 第三節(jié) 設(shè)計(jì)工作流程 8 第四節(jié) 欄目設(shè)計(jì) 9 第四章 公司網(wǎng)站制作 9 第一節(jié) 設(shè)計(jì)草圖 9 第二節(jié) 設(shè)計(jì)制作PSD模板 11 第三節(jié) 利用DIV+CSS制作網(wǎng)站頁面 16 第五章 總結(jié) 28 第六章 致謝 29  第1章 緒論 第1節(jié) 國內(nèi)外電子商務(wù)發(fā)展的現(xiàn)狀 電子商務(wù)，涵蓋的范圍很廣，一般可分為代理商、商家和消費(fèi)者（Agent、Business、Consumer，即ABC）企業(yè)對企業(yè)(Business-to-Business，即 B2B），企業(yè)對消費(fèi)者（Business-to-Consumer，即 B2C），個(gè)人對消費(fèi)者(Consumer-to-Consumer，即 C2C），企業(yè)對政府（Business-to-Government）， 線上對線下（Online To Offline，O2O），商業(yè)機(jī)構(gòu)對家庭（Business To Family），供給方對需求方（Provide to Demand），門店在線（Online to Partner，O2P）等8種模式。 近年電子商務(wù)在中國發(fā)展勢頭迅猛，從無到有成長了很多電子商務(wù)的大咖，中國的本土電商正在做大做強(qiáng)。 北京時(shí)間2015年5月15日上午，商務(wù)部新聞發(fā)言人沈丹陽介紹《中國電子商務(wù)報(bào)告（2014）》時(shí)說，我國電子商務(wù)交易總額快速增長，已成為國民經(jīng)濟(jì)的重要增長點(diǎn)，并且國際影響力顯著增強(qiáng)。 沈丹陽認(rèn)為傳統(tǒng)企業(yè)將繼續(xù)加快進(jìn)入電子商務(wù)領(lǐng)域的步伐，移動電子商務(wù)將繼續(xù)保持高速增長，大宗商品交易平臺將成為電子商務(wù)發(fā)展的熱點(diǎn)。 在國外方面，從美國電子商務(wù)現(xiàn)狀入手分析。電子商務(wù)市場正以前所未有的速度騰飛而起，這主要是由少數(shù)平臺推動的。 從圖1-1可以看出，F(xiàn)lipkart、Amazon Seller Central、Shopify和阿里巴巴全球速賣通（AliExpress）的流量正在不斷增長。 圖 1-1 電子商務(wù)流量分析 推動電子商務(wù)市場飛速發(fā)展的因素很多，包括更有吸引力的價(jià)格，更多更便捷的送貨渠道，這些市場采用的營銷手段等等。這種趨勢是向上的，在快遞網(wǎng)絡(luò)不斷健全的今天，電子商務(wù)的發(fā)展明顯呈現(xiàn)出加速增長的態(tài)勢。 當(dāng)然，這四家平臺并不像產(chǎn)品那樣具有直接的可比性。Shopify支持的是賣家自己網(wǎng)站上的貿(mào)易，而亞馬遜、Flipkart和全球速賣通則為賣家們提供了一個(gè)市場平臺，賣家們在同一平臺上爭奪客戶。但是這張圖傳達(dá)出來的訊息是很明顯的，那就是大平臺支持小商店的情況將越來越普遍。 在流量趨勢方面，世界各大電商正在壓縮美國電商，美國的巨頭將失去全球在線零售的大筆訂單而更加轉(zhuǎn)向本土，在這樣的增長態(tài)勢下，對于eBay、亞馬遜和沃爾瑪?shù)裙緛碚f將是壓力重重的。 在美國電商網(wǎng)站方面，用戶參與度高的平臺的流量增長趨勢明顯大于用戶參與度低的平臺，并且電子商務(wù)變得更具有社交性，各電商網(wǎng)站擁有了分享功能。用戶的分享為平臺提供了一大部分流量，來自用戶對用戶的宣傳與討論也促進(jìn)產(chǎn)品的銷售。 總結(jié)下來國內(nèi)外電商發(fā)展主要呈以下幾種趨勢： 趨勢一：小商店將得到大平臺的支持 趨勢二：美國的巨頭們將喪失對全球在線零售業(yè)的掌控 趨勢三：用戶參與度將是一項(xiàng)更重要的因素 趨勢四：電子商務(wù)將變得更具社交性 電子商務(wù)越來越滲入每一個(gè)人的生活，在今后的發(fā)展中，會更加離不開電子商務(wù)。對于企業(yè)來說，拓展電子商務(wù)越來越必要。 第二節(jié) 公司網(wǎng)站的重要性 在電子商務(wù)發(fā)展迅猛的今天，公司網(wǎng)站成為各大企業(yè)競爭的一項(xiàng)要點(diǎn)。各公司網(wǎng)站的功能與用戶體驗(yàn)也影響用戶選擇公司。 有利于提升企業(yè)形象企業(yè)網(wǎng)站的作用更類似于企業(yè)在報(bào)紙和電視上所做的宣傳企業(yè)本身及品牌的廣告。可以全面詳細(xì)地介紹企業(yè)及企業(yè)產(chǎn)品企業(yè)網(wǎng)站的一個(gè)最基本的功能，就是能夠全面、詳細(xì)地介紹企業(yè)及企業(yè)產(chǎn)品。企業(yè)可以把任何想讓人們知道的信息放入網(wǎng)站。如企業(yè)簡介、企業(yè)的人員、廠房、生產(chǎn)設(shè)施、研究機(jī)構(gòu)、產(chǎn)品外觀、功能及使用方法等，都可以展示于網(wǎng)上。還可以在線銷售，可以與潛在客戶建立商業(yè)聯(lián)系這是企業(yè)網(wǎng)站最重要的功能之一，也是為什么那么多企業(yè)非常重視網(wǎng)站建設(shè)的根本原因。 現(xiàn)在，世界各國的經(jīng)銷商主要都是利用互聯(lián)網(wǎng)絡(luò)來尋找新的產(chǎn)品和新的供求，因?yàn)檫@樣做費(fèi)用最低.效率最高。原則上，全世界任何人，只要知道了企業(yè)的網(wǎng)址，就可以看到企業(yè)的產(chǎn)品和服務(wù)。因此，關(guān)鍵在于如何將企業(yè)網(wǎng)址推廣出去。公司網(wǎng)站在對于老客戶的溝通方面也非常方便，使用公司網(wǎng)站的電子郵件業(yè)務(wù)讓公司每年省下一大筆費(fèi)用，同時(shí)實(shí)現(xiàn)對客戶的實(shí)時(shí)溝通也是非常重要的。  第2章 DIV+CSS網(wǎng)站設(shè)計(jì)與制作技術(shù) 第1節(jié) 網(wǎng)頁設(shè)計(jì)與制作的主要工具 網(wǎng)頁設(shè)計(jì)工具：PS、CorelDraw、Ai、Flash等 網(wǎng)頁制作的主要工具有：Dreamweaver、VisualStudio、Idea、PHPStorm、記事本等 網(wǎng)頁設(shè)計(jì)與制作的工具有很多，很多軟件具有強(qiáng)大的開發(fā)輔助功能。設(shè)計(jì)方面需要一個(gè)圖像制作軟件，圖像處理軟件很多。功能強(qiáng)大并且越順手越適合使用，軟件需要提供切片功能。制作方面，Dreamweaver作為一個(gè)保姆型入門軟件將所有的方面考慮的很周全，讓網(wǎng)頁開發(fā)變得簡單。熟練后也會發(fā)現(xiàn)Idea工具非常好用。而后面提到了記事本，表明網(wǎng)頁的制作工具要求其實(shí)非常的低，是個(gè)文本編輯器基本都是可以制作網(wǎng)頁的，文本工具占用的磁盤空間非常小，而網(wǎng)頁的體積小也正是他流通的優(yōu)勢。本文接下來主要使用的工具有PS+VisualStudio。 第二節(jié) DIV+CSS技術(shù)介紹 DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。提起DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。 通過外鏈樣式CSS，可以給網(wǎng)站進(jìn)行模板制作，將樣式的編寫操作多次引用達(dá)到節(jié)省操作的目的。 第三節(jié) 網(wǎng)站制作流程 第一步：確定網(wǎng)站需求。? 客戶將自己所要建設(shè)的網(wǎng)站功能以及相關(guān)要求告知設(shè)計(jì)人員，如想要的效果，開設(shè)的欄目，想要的風(fēng)格等。同時(shí)需提供網(wǎng)站制作的相關(guān)資料，產(chǎn)品描述，詳細(xì)的網(wǎng)站框架設(shè)計(jì)要求等。? 第二步：制定網(wǎng)站制作方案? 雙方就網(wǎng)站制作的內(nèi)容、風(fēng)格、細(xì)節(jié)等問題進(jìn)行協(xié)商，以達(dá)成共識。為網(wǎng)站建設(shè)的開展做鋪墊。? 第三步：簽定網(wǎng)站制作合同，支付預(yù)付款? 雙方簽定《網(wǎng)站制作合同》，合約是雙方利益的保障。?支付預(yù)付款之后網(wǎng)站開始動工了。 第四步：注冊域名、空間? 選擇合適的注冊域名和空間。為之后網(wǎng)站的開發(fā)做良好的鋪墊。? 第五步：網(wǎng)站制作定位? 確定網(wǎng)站的定位，作為產(chǎn)品銷售和公司介紹的網(wǎng)站，給網(wǎng)站定好位。利于接下來的開發(fā)。? 第六步：網(wǎng)站風(fēng)格設(shè)計(jì)? 網(wǎng)站的風(fēng)格包括很多方面，整個(gè)網(wǎng)站的總體風(fēng)格，每個(gè)欄目頻段自己獨(dú)有的風(fēng)格，網(wǎng)站基本框架的設(shè)計(jì)等。最后將初步做好的網(wǎng)站與客戶進(jìn)行討論并加以改進(jìn)。? 第七步：網(wǎng)站制作? 網(wǎng)站應(yīng)當(dāng)有一個(gè)很清晰的網(wǎng)站介紹，有一個(gè)簡潔的界面，需要告訴訪問者網(wǎng)站能夠提供些什么，以便訪問者能找到想要的東西。有效的導(dǎo)航條和良好的結(jié)構(gòu)，使人們很容易找到需要的產(chǎn)品，這對網(wǎng)站客戶很重要。? 第八步：網(wǎng)站驗(yàn)收? 網(wǎng)站制作完成后，將會反復(fù)審核、測試、修改最后通過客戶的驗(yàn)收，網(wǎng)站才算建好。? 第九步：網(wǎng)站宣傳推廣工作? 網(wǎng)站建好之后，需要對網(wǎng)站進(jìn)行宣傳推廣，可以聘請網(wǎng)絡(luò)優(yōu)化團(tuán)隊(duì)，為網(wǎng)站的搜索進(jìn)行優(yōu)化。? 第十步：網(wǎng)站后期維護(hù)? 網(wǎng)站建成驗(yàn)收以后，如果涉及到圖片文字更換及數(shù)據(jù)庫升級、修改漏洞及找回管理員密碼等情況需要修改網(wǎng)站，屬于網(wǎng)站的后期維護(hù)。  第三章 某公司網(wǎng)站設(shè)計(jì) 第一節(jié) 確定公司創(chuàng)建網(wǎng)站的目的與意義 根據(jù)論文題目，以售酒公司作為例子，售酒公司需求一個(gè)在線售賣紅酒的網(wǎng)站。目的是發(fā)展公司的線上銷售業(yè)務(wù)，來推動公司收益。公司創(chuàng)建網(wǎng)站能有效的宣傳公司產(chǎn)品以及提高銷量，并且加入電子商務(wù)行列。 第2節(jié) 需求分析 首先公司售酒的網(wǎng)站需要一個(gè)在線能購買公司產(chǎn)品的功能，網(wǎng)站也需要頁面實(shí)現(xiàn)對于公司文化的介紹。對于每一件商品需要有一個(gè)產(chǎn)品詳情頁面，能通過后臺添加產(chǎn)品詳情信息。需要秒殺商品頁，能展示商品秒殺和記錄哪些用戶秒殺了商品。網(wǎng)站需要用多種方式來展示公司產(chǎn)品，不顯得單調(diào)死板，也不能顯得花里胡哨，體現(xiàn)公司文化的穩(wěn)重。首頁需要大圖來突出展示幾種商品，也需要小塊的商品展示以便于介紹更多商品。 第3節(jié) 設(shè)計(jì)工作流程 第一、對網(wǎng)站整體風(fēng)格的設(shè)計(jì) 這是對網(wǎng)站整體框架的定位，對于紅酒行業(yè)，網(wǎng)站的風(fēng)格會有不一樣的風(fēng)格表現(xiàn)形式，在視覺上突出一種優(yōu)雅和高貴的感覺，讓用戶視覺上定位該站，符合用戶的視覺印象。加深網(wǎng)頁元素在用戶面前的表現(xiàn)力，增強(qiáng)用戶的購買欲。決定使用酒紅色作為全站的主色調(diào)，風(fēng)格上采用扁平化，使用塊狀的設(shè)計(jì)讓網(wǎng)站更加簡潔大氣。 第二、進(jìn)行網(wǎng)頁的布局設(shè)計(jì) 網(wǎng)站的布局結(jié)構(gòu)性質(zhì)繼承上面第一步的表現(xiàn)風(fēng)格，在添加豐富的酒元素，用酒和優(yōu)雅去“熏陶”出每一個(gè)頁面。使頁面的表現(xiàn)帶動訪客的心靈。 第三、產(chǎn)品目錄的平面設(shè)計(jì)； 定好位，并布好局，設(shè)計(jì)大的div塊。暫時(shí)先不管塊中的內(nèi)容，先想好容器的擺放位置，將需要表現(xiàn)的東西的大塊先在頁面上擺放合適。隨后再進(jìn)行更加細(xì)節(jié)方面的制作，將網(wǎng)站的整體制作成為psd文件，為接下來切圖做好準(zhǔn)備。 第四、各類專題廣告設(shè)計(jì)； 好產(chǎn)品當(dāng)然要有好廣告，酒香也怕巷子深的哦，做個(gè)大大的廣告banner，這樣客戶在訪問網(wǎng)站的時(shí)候，知道當(dāng)前主要推薦的內(nèi)容是什么。突出某些產(chǎn)品或者服務(wù)，在網(wǎng)頁上添加各種廣告元素gif圖片、flash動畫等等，盡量吸引訪客的眼球，然后突出的表現(xiàn)想表現(xiàn)的東西，這樣就更加促成了轉(zhuǎn)換率了。 第五、利用div+css制作網(wǎng)站頁面。 網(wǎng)頁設(shè)計(jì)固然重要，但是最關(guān)鍵的是如何將網(wǎng)頁制作出來，設(shè)計(jì)和制作上面還會有不小的沖突，在切圖后將頁面排版出來，做出最初的div模型。制作時(shí)可以使用各種插件輔助工作，因?yàn)榫W(wǎng)上的js插件都是開源的，使用起來不用擔(dān)心版權(quán)問題。Div模型制作出來之后將各種產(chǎn)品的排版加入其中，使之成為一個(gè)完整的頁面。然后可以考慮網(wǎng)站的動畫效果問題。這個(gè)問題需要考慮的更多，對于各種瀏覽器的支持以及兼容性問題，爭取能兼容各大瀏覽器。 第六、網(wǎng)站的測試與交互 網(wǎng)頁的div+css排版制作完成后需要交給制作后臺的人員進(jìn)一步工作，交付前需要進(jìn)行兼容性測試，測試完成后將靜態(tài)的網(wǎng)頁文件交出進(jìn)行后臺添加變成動態(tài)網(wǎng)頁。完成產(chǎn)品的添加以及各種功能的實(shí)現(xiàn)。 第4節(jié) 欄目設(shè)計(jì) 首頁 導(dǎo)航欄：點(diǎn)擊導(dǎo)航欄能進(jìn)行挑戰(zhàn)，本頁面內(nèi)跳轉(zhuǎn)。 輪播欄：輪播欄展示公司主要推薦購買的三種產(chǎn)品。 秒殺欄：倒計(jì)時(shí)秒殺，做出動畫顯示倒計(jì)時(shí)，使網(wǎng)頁看起來不是那么死板。 產(chǎn)品展示欄：產(chǎn)品展示，通過后臺添加圖片和介紹在前臺展示，此處暫時(shí)只作為效果展示，不具備后臺。 友情鏈接欄：網(wǎng)頁友情鏈接，將用于推廣網(wǎng)頁。鏈接可后臺添加，此處只作為效果展示。 腳部聲明欄：必要的網(wǎng)頁聲明，否則違法，只作為效果展示。 公司介紹頁 公司介紹頁面主要為公司照片展示與公司文字介紹。 產(chǎn)品詳情頁 產(chǎn)品展示欄：展示產(chǎn)品的大圖，并且添加價(jià)格及優(yōu)惠。同時(shí)提供購買和加入購物車選項(xiàng)。 產(chǎn)品詳情頁面：產(chǎn)品詳細(xì)介紹，以及優(yōu)惠詳情，各種信息可以加入其中，把想告訴客戶的全部放在詳情頁面中。 限時(shí)搶購頁 限時(shí)搶購商品展示欄：展示前面的限時(shí)搶購商品，提供搶購按鈕，并且時(shí)間到了才能搶。 政策法規(guī)頁面 結(jié)構(gòu)大體上與公司詳情頁一樣，可以排版圖文。  第四章 公司網(wǎng)站制作 第一節(jié) 設(shè)計(jì)草圖 首先需要確定的是網(wǎng)頁的寬度，現(xiàn)在的主流顯示器的分辨率有1280*960（4:3屏幕）、1366*768（低分屏筆記本）、1440*900（低分屏寬屏）或者更高1080P、2160P等。設(shè)計(jì)網(wǎng)頁為了使這些分辨率的電腦都能使用，設(shè)計(jì)的寬度不能超過1280主流顯示器的寬度。又為了保證橫向的滾動條不會顯示出來，采用了1248px寬度。整個(gè)網(wǎng)頁居中顯示，每一欄目使用欄目背景顏色填充，使網(wǎng)站能適應(yīng)各種分辨率。畫出草圖如圖4-1所示： 圖 4-1 網(wǎng)站草圖1 首頁的頁面規(guī)定好之后接下來的所有頁面可以按照首頁的模板制作頭部和腳部，只用替換掉中間的內(nèi)容即可。圖4-2是搶購頁面： 圖 4-2 網(wǎng)站草圖2 搶購頁面產(chǎn)品如果有多個(gè)產(chǎn)品可以無限延伸下去。剩下的政策法規(guī)、公司簡介欄目只需要替換首腳部，中間使用圖文混排并居中即可。 第二節(jié) 設(shè)計(jì)制作PSD模板 使用工具PS制作網(wǎng)頁效果圖，并且使用切片工具將圖片切成小圖，避免不必要的背景色圖片浪費(fèi)圖片資源，用戶加載慢。優(yōu)化網(wǎng)站打開速度和用戶體驗(yàn)。 制作時(shí)合理使用PS中的輔助線工具能讓網(wǎng)頁看起來格式對齊。先確定網(wǎng)站結(jié)構(gòu)是左右結(jié)構(gòu)還是一塊塊拼接或者瀑布流。確定后考慮配色，將網(wǎng)站的配色確定后，一塊一塊的設(shè)計(jì)完成組裝起來成為一個(gè)頁面，頁面可能比較長，超過10000px的頁面不能保存為psd，解決方法：保存為psb格式文件或者分成兩個(gè)psd分別保存與切片，都需要與開發(fā)人員寫注釋或者交流清楚。 首先需要制作網(wǎng)站的頭部如圖4-3所示。 圖 4-3 網(wǎng)頁設(shè)計(jì)1 首先設(shè)計(jì)出網(wǎng)站的logo及加上起名等，在旁邊做出文字介紹等內(nèi)容。列出需要的頁面做出菜單，并將選中的菜單項(xiàng)目稍微調(diào)色表示選中，如圖4-4所示。 圖 4-4 網(wǎng)頁設(shè)計(jì)2 隨后制作搜索框，一定要保證文本與搜索框?qū)R，不然排版會顯得參差不齊。 接下來制作輪播頁面，暫時(shí)先把輪播頁面的圖片排好版，將使用如下圖片示例，圖文混搭做出banner圖效果后。可以在網(wǎng)上下載按鈕等文件表示此圖將輪播，在圖片下方需要使用塊來告訴用戶有幾張輪播，可以通過點(diǎn)擊塊來跳轉(zhuǎn)頁面。 圖 4-5 網(wǎng)站設(shè)計(jì)3 圖片制作好后，把他加入到網(wǎng)頁中，插入按鈕等一定要注意對齊。 圖 4-6 網(wǎng)站設(shè)計(jì)4 接下來秒殺欄目使用網(wǎng)上的瓶裝葡萄酒圖片素材加上文案做出圖4-7效果： 圖 4-7 網(wǎng)站設(shè)計(jì)5 商品展示欄做出三個(gè)風(fēng)格差不多的樣式，都是使用上面標(biāo)題加上下面小塊商品拼接而成，商品只是做出一個(gè)模板可以復(fù)制多個(gè)： 圖 4-8 網(wǎng)站設(shè)計(jì)6 最后制作腳部，再次強(qiáng)調(diào)文本一定要對齊，并且盡量不要使用宋體。由于LW紅酒只是作為示范沒有申請各種文件，此處使用x將聲明信息打碼，友情鏈接方面只作為樣式參考。 圖 4-9 網(wǎng)站設(shè)計(jì)7 整頁psd樣式，其中商品展示欄需要制作多個(gè)這里不再贅述： 圖 4-10 網(wǎng)站設(shè)計(jì)8 由于頁面太長，需要設(shè)計(jì)一個(gè)專門做導(dǎo)航來浮動顯示，隨時(shí)可以跳轉(zhuǎn)到位置，此處二維碼可以替換成為公司的手機(jī)站或者app，暫時(shí)使用無關(guān)的二維碼僅作示范。 圖 4-11 網(wǎng)站設(shè)計(jì)9 接下來使用切片工具仔細(xì)的將頁面中的圖片切出來，然后主頁就完成啦。 圖 4-12 網(wǎng)站設(shè)計(jì)10 接下來完成子頁面，子頁面基本都是單頁，使用ps將頁面設(shè)計(jì)完成。全站頭腳都使用首頁的樣子，只是稍微改動中間部分。 圖 4-13 網(wǎng)站設(shè)計(jì)11 當(dāng)然這個(gè)頁面中的所有文字都是可以更改的，價(jià)格標(biāo)題都是為了給后臺開發(fā)人員作為樣式參考。然后是公司簡介，只需要替換頭腳中間圖文居中即可： 圖 4-14 網(wǎng)站設(shè)計(jì)12 政策法規(guī)頁面與公司簡介頁面一致。 第3節(jié) 利用DIV+CSS制作網(wǎng)站頁面 開始制作網(wǎng)站頁面，首先需要?jiǎng)?chuàng)建一個(gè)html文檔，根據(jù)HTML5標(biāo)準(zhǔn)寫上聲明： 當(dāng)然也可以根據(jù)html4的標(biāo)準(zhǔn)聲明，這只是HTML5把他簡化了而已。使用很多軟件創(chuàng)建空白html文檔的時(shí)候會自動生成聲明。現(xiàn)在需要將外部樣式表css鏈入文檔中，順便將需要使用的js也一起鏈接進(jìn)去。比如jQuery庫和自己用來寫代碼的js。將以上說的這些寫在中間。 根據(jù)前面設(shè)計(jì)好的草圖先大概做出div的框架。 圖 4-15 網(wǎng)站制作1 然后設(shè)計(jì)導(dǎo)航欄，使用hr標(biāo)簽來把每個(gè)A標(biāo)簽分隔開，之后在href中寫上鏈接的位置，頁面內(nèi)跳轉(zhuǎn)至div用#號表示。將鏈接處分別填上想要跳轉(zhuǎn)至的div。 最后的關(guān)閉按鈕使用jquery綁定事件，自己的jQuery事件寫在my.js中，前面有過引用，然后再在my.js中添加如下代碼： $("#close").click(function(){$("#daohang").hide();}); 現(xiàn)在導(dǎo)航已經(jīng)出來了，但是不會跟隨頁面移動并且長的挺難看的，所以給他慢慢調(diào)好樣式添加入css中： #daohang {Z-INDEX: 11;background-color: #000;height: 300px;width: 120px;position: fixed;top:200px;right: 30px;text-align: center;} #daohang a{color:#fff;font-family: "黑體";font-size: 18px;font-weight: bold;text-decoration: none;line-height: 40px;vertical-align: middle;} 然后開始制作頭部，將logo和搜索框制作出來，將需要的圖片命名好之后放入images文件夾，在wrap中添加代碼： 在css.css中定義好中間各class樣式將頁面的表現(xiàn)與psd中的展示一致。并且在a標(biāo)簽的href中添加鏈接javascript:void(0);實(shí)現(xiàn)鼠標(biāo)指針指上去時(shí)候變成手型并且不會進(jìn)行任何跳轉(zhuǎn)。此鏈接在后期制作后臺的時(shí)候會替換掉。不然會影響到網(wǎng)站的seo，搜索引擎的權(quán)重會因?yàn)檫@個(gè)降低。 然后是關(guān)于菜單的制作。菜單樣式在ps中有規(guī)定顏色，并且選中的菜單會有不一樣的效果，此處可以用切圖，但是會導(dǎo)致占用很多資源導(dǎo)致使用起來的用戶體驗(yàn)降低。盡量要使用文字來解決這個(gè)問題。想起來畫面蠻復(fù)雜的，實(shí)際上菜單的前臺其實(shí)很簡單，使用ul、li標(biāo)簽直接制作出來就可以了：

• 首頁
• 限時(shí)搶購
• 預(yù)售
• 公司簡介
• 政策法規(guī)
• 購買咨詢

菜單可以出效果的主要原因是定義樣式，在css.css中加入樣式： .nav_menu {position: relative;height: 44px;line-height: 44px;font-size: 16px;background-color:#700702;} .nav_menu ul li {float: left;margin:0 0.5%;} .nav_menu ul li a {display: inline-block;padding: 0 17px;color: #fff;text-align: center;} 這樣添加之后菜單就已經(jīng)成型了，還差一個(gè)選擇的效果，給它定義一個(gè)class=”selected”。并且在css中加入： .nav_menu ul li a:hover, .nav_menu ul li a.selected {background-color:#8C0903;text-decoration: none;} 這樣子菜單的樣式就已經(jīng)完成了，hover定義將鼠標(biāo)指上去時(shí)，而平時(shí)高亮顯示出來的菜單，只需要給它加上一個(gè)selected的樣式就可以了。 接下來需要給購買咨詢添加一個(gè)彈出電話號碼的提示框的事件，在購買咨詢中加入：onclick="alert('請撥打電話028-********');"如下樣式：

購買咨詢

輪播的頭圖可以去網(wǎng)上找jQuery插件修改起來比較方便，找到合適的輪播插件下載下來后，將自己的圖片替換上去，并且自己修改一些參數(shù)，比如速度，輪播的動畫方式。前臺使用規(guī)定格式的代碼不要出錯(cuò)，不然插件也會出問題，還有就是記得要引用jQuery。 接下來是搶購欄目了，因?yàn)橹皃s中制作到這個(gè)欄目都是用的圖片，所以在做網(wǎng)頁的時(shí)候也非常方便，做好div用img標(biāo)簽把圖片放進(jìn)去就好了： 對于class：mid定義的是居中，下面會引用好幾次，所以作為class寫入外部css中，psd中可以看出這個(gè)頁面的背景是填充滿頁面的，所以需要定義外面包含的大塊#content： #content{background:#fdd42e;} 商品展示頁面需要將標(biāo)題制作成圖片居中： 將圖片放好之后就要慢慢的去制作商品的模板了，由于商品價(jià)格和標(biāo)題以及介紹都是后臺要能改動的，所以不能使用圖片直接來放在頁面上。先制作出一個(gè)商品的展示塊： 后面還需要制作很多個(gè)這樣的商品展示塊，所以不能使用id來選擇。中間所有的樣式全部用class選擇。其中的各種需要細(xì)心慢慢去調(diào)整，必要時(shí)可以更改定位方式position屬性，relative屬性是相對定位，相對于之前的容器。float屬性使用時(shí)要注意方法不要影響到之后的樣式。css樣式中這樣寫： .jiu{width:230px;height:240px;background:#f63;float:left;margin-right:5px;margin-bottom:5px;} .jiu_one{width:230px;height:190px;background:#fff;} .jiu_two{width:230px;height:50px;background:#F63;} .font_hide {position: relative;left: 0px;top: -72px;width:130px;height:43px;overflow:hidden;background:#fff;} 然后可以將這一塊商品展示復(fù)制8次，變成頁面上的樣子，并且根據(jù)文案修改成不一樣的文字、價(jià)格查看效果： 圖 4-16 網(wǎng)站制作2 緊接著會發(fā)現(xiàn)當(dāng)介紹的文案過長時(shí)div裝不下那么多字只顯示出來一半，需要做一個(gè)隱藏顯示操作來將所有的文案顯示出來，之前定義的font_hide樣式現(xiàn)在就有用了，可以通過jQuery選擇器選中所有具有font_hide樣式的塊為他綁定事件。所以在my.js中加入： $(".font_hide").hover(function(){$(this).css("height","170px"); }); $(".font_hide").mouseleave(function(){$(this).css("height","43px"); }); 并在css中寫入： .font_hide a{text-decoration:none;color:#111;font-weight: bold;} 特別注意.font_hide中要加入兩條屬性，一個(gè)是透明度，一個(gè)是層次： opacity:0.7; z-index:10; 當(dāng)鼠標(biāo)移動上去的時(shí)候，這個(gè)div的高度變成了170像素，鼠標(biāo)移開之后又恢復(fù)原樣。并且這個(gè)介紹文字會有一個(gè)透明度70%。 下面來查看效果： 圖 4-17 網(wǎng)站制作3 圖 4-18 網(wǎng)站制作4 然后制作第二第三個(gè)商品展示欄目的時(shí)候，可以整體復(fù)制第一個(gè)商品展示欄目改掉id為content_one和content_two。然后將設(shè)計(jì)好的標(biāo)題替換掉之前的圖片，配色方案選擇好。不要看起來特別奇怪，將背景顏色改變后可以進(jìn)行進(jìn)一步的商品管理設(shè)計(jì)。想要在第三個(gè)商品展示欄加上如圖4-19效果的模塊： 圖 4-19 網(wǎng)站制作5 這其實(shí)也非常簡單，只需要在content_two中，所有的div class=”jiu”之上加入兩個(gè)div。這也是div與css技術(shù)非常方便的一點(diǎn)，可以像制作表格一樣隨意插入在某div上面。 使用map屬性來給圖片加上鏈接，使用戶能夠點(diǎn)擊搶購按鈕跳轉(zhuǎn)。最后把友情鏈接和聲明做好，由于都是文本，所以做起來格外簡單。要注意的是字體千萬不要用宋體，會顯得與網(wǎng)站其他內(nèi)容格格不入，代碼如下： 緊接著添加css： .link{padding: 15px 0;background-color: #e5e5e5;position: relative;} .link .link_left, .link .link_right{font-size: 13px;}.link .link_left{float: left;}.link .link_left span{color: #FD9909;}.link .link_right{margin-left: 65px;}.link .link_right a{display: inline-block;color: #444;margin-right: 15px;vertical-align: middle;}.footer{min-width:1024px;margin: 0 auto;padding: 30px 0px;font-size: 14px;color: #fff;line-height: 160%;background-color:#000;} 首頁就制作完成啦，然后將制作好的html和css保存，開始使用各種瀏覽器測試。很多瀏覽器中帶有兼容性檢查的插件，不過還是要手動測試一些瀏覽器的兼容性。需要測試的主流瀏覽器有：Safari、chrome、IE、Google、opera以及新出現(xiàn)的Edge。 首頁制作完成之后開始制作子頁面，制作公司簡介。先把css和jQuery引用，將頁面保存在html文件夾中，引用css時(shí)，需要修改路徑：href="../css/css.css" 。把首頁的頭部和菜單復(fù)制過來，并且需要修改class="selected"的位置到公司簡介位置：

公司簡介

然后將頁面的友情鏈接和聲明復(fù)制過來放在頁面最下部。根據(jù)前面設(shè)計(jì)的psd模板，設(shè)計(jì)頁面結(jié)構(gòu)設(shè)計(jì)出來： 將簡介的內(nèi)容放在P標(biāo)簽中加入頁面，公司簡介頁面就制作完成了，然后需要做一個(gè)鏈接的跳轉(zhuǎn)，首先找到首頁的公司首頁a標(biāo)簽將鏈接添加好：公司簡介。隨后找到公司簡介頁面的a標(biāo)簽修改：首頁。 制作政策法規(guī)頁面時(shí)，直接將gs.html復(fù)制一份，因?yàn)榇篌w框架都是一樣的，只需要替換中間的文案部分。將圖片刪除，標(biāo)題替換到hr標(biāo)簽中，正文每一段使用一個(gè)p標(biāo)簽。稍微再調(diào)整一下行距、樣式等，政策法規(guī)頁面就完成了。然后修改完成的三個(gè)頁面的鏈接跳轉(zhuǎn)，使制作出來的頁面可以互相跳轉(zhuǎn)。菜單欄selected一定要記得剪切到政策法規(guī)標(biāo)簽中了，樣式就出來啦： 圖 4-20 網(wǎng)站制作6 搶購頁面也是按照之前做好的模板樣式來制作，首先拷貝首頁的頭腳部分，將css和jQuery引用。然后開始制作產(chǎn)品的排版。首先需要一個(gè)鋪滿全網(wǎng)頁的背景： 將背景樣式定義好之后，把產(chǎn)品展示的div放在其中，排版的效果按照psd中顯示的一樣。其中中間塊的背景色在ps中吸取產(chǎn)品上面的顏色。代碼如下： Css樣式如下： .xxh1{color:White;font-family: "微軟雅黑";font-size:60px;}.xxa{text-indent:2em;color:White;font-family: "微軟雅黑";margin-left:2em;margin-right:2em;}.xxa a:link {color:White;text-decoration:underline;}.xxa a:visited {color:White;text-decoration:none;}.xxa a:hover {color:White;text-decoration:none;}.xxa a:active {color:White;text-decoration:none;}.left{float:left;}.w100{width:100%;} 此頁面中通過浮動的方法使所有的文字圖片等完成psd中的效果，當(dāng)然文字與價(jià)格僅僅是作為一個(gè)樣式示范來給后天開發(fā)人員看到效果，而所有的文字都是會從數(shù)據(jù)庫中讀取的。制作好一段之后在瀏覽器中查看效果： 圖 4-21 網(wǎng)站制作7 然后復(fù)制四段，替換掉其中的圖片和背景顏色。發(fā)現(xiàn)所有的產(chǎn)品都在一邊，然后找到img標(biāo)簽中的 class="left" ，如果需要產(chǎn)品圖片顯示在右邊，將其刪除即可。然后查看效果： 圖 4-22 網(wǎng)站制作8 成功，頁面完成。檢查所有頁面菜單欄跳轉(zhuǎn)鏈接，網(wǎng)站基本完成。 第五章 總結(jié) 制作一個(gè)網(wǎng)站需要多個(gè)頁面，當(dāng)需要制作一個(gè)網(wǎng)頁時(shí)，那不會很難。當(dāng)制作一個(gè)優(yōu)秀的網(wǎng)站時(shí)，那工作量就大了。需要確定整站風(fēng)格，確定整站樣式，整站需求，還有站內(nèi)跳轉(zhuǎn)，數(shù)據(jù)來源等等。還有一系列工序，本文僅僅是介紹了div+css技術(shù)制作能交付后臺開發(fā)使用的網(wǎng)頁。在電子商務(wù)飛速發(fā)展的今天，學(xué)好html將成為求職路上一塊重量級的敲門磚。  第6章 致謝 在這次論文寫作之前對于div+css實(shí)戰(zhàn)經(jīng)驗(yàn)缺乏的我，通過對于這次論文的寫作扎實(shí)了自己的知識。在這短短幾個(gè)月的時(shí)間學(xué)習(xí)到了許多書本上學(xué)習(xí)不到的知識，感謝學(xué)校對于論文寫作的規(guī)范要求，讓我對于文章的排版大有改善。隨著畢業(yè)設(shè)計(jì)的完成，我也將要畢業(yè)了，再也無法像過去三年可以在學(xué)校吃，在學(xué)校住，在學(xué)校學(xué)習(xí)。感謝學(xué)校三年來對我的栽培，感謝計(jì)科系老師的教導(dǎo)。 特別要感謝的是我的論文指導(dǎo)老師XX。大學(xué)期間擔(dān)任科代表，學(xué)到的知識遠(yuǎn)超過其他同學(xué)。不光是學(xué)習(xí)，青老師還處處指導(dǎo)方方面面的小事情。大學(xué)期間什么事情都有與青老師商量的習(xí)慣，也耽誤了老師不少時(shí)間。青老師也沒有不耐煩過，謝謝您的教導(dǎo)。在論文寫作期間，老師也處處指導(dǎo)，仔仔細(xì)細(xì)檢查論文格式以及內(nèi)容上面需要修改的地方。相信整篇論文一定花了不少時(shí)間吧，讓您費(fèi)心了。 再次感謝論文指導(dǎo)老師XX。感謝實(shí)習(xí)指導(dǎo)老師林超對論文寫作的指導(dǎo)與幫助。感謝網(wǎng)絡(luò)資料以及參考文獻(xiàn)的分享者。 參考文獻(xiàn) [1] 中華人民共和國商務(wù)部，中國電子商務(wù)報(bào)告(2014)，中國商務(wù)出版社。 [2] 《美國零售市場研究報(bào)告》，《連鎖》2014年6月刊。 [3] Ben Frain, 響應(yīng)式Web設(shè)計(jì),人民郵電出版社，2015年7月3日 [4] 李東博，《Dreamweaver+Photosho網(wǎng)頁設(shè)計(jì)》，清華大學(xué)出版社,2010 [5] 喻浩，《CSS+DIV網(wǎng)頁樣式與布局》，清華大學(xué)出版社,2013 [6] 陳濤，《電商內(nèi)幕傳統(tǒng)企業(yè)進(jìn)入電商的必修課》，電子工業(yè)出版社,2014.4.1 [7]王日芬.丁晟春.《電子商務(wù)網(wǎng)站設(shè)計(jì)與管理》，北京大學(xué)出版社,2012.10 [8]王海軍.《網(wǎng)頁設(shè)計(jì)與制作》，機(jī)械工業(yè)出版社出版社,2008.6.1 [8]Mark Pilgrim，HTML5 Up and Running，2010年8月 [9]劉西杰、柳林，HTML、CSS、JavaScript網(wǎng)頁制作從入門到精通，人民郵電出版社，2013年1月1日 [10]布萊恩特 (Jay Bryant)，高性能HTML5，電子工業(yè)出版社，2014年5月1日 XXXXXXXX學(xué)院 畢業(yè)論文（設(shè)計(jì)）實(shí)施過程記錄表 畢業(yè)論文（設(shè)計(jì)）題目 網(wǎng)站設(shè)計(jì)與制作（DIV+CSS) 指導(dǎo)教師 XX 班級 XXXXXXXX 姓名 XX 學(xué)號 XXXXXXXX 選題 與布 置任 務(wù)書 階段 進(jìn)展情況記錄： 搜集資料查閱，明白選擇的題目的主要內(nèi)容，選擇合適的題目。確定任務(wù)書上的要求，給自己一個(gè)明確的方向，以便于接下來工作的開展。大范圍的選擇相關(guān)資料備用。 指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日 資料 收集 和 初稿 撰寫 階段 進(jìn)展情況記錄： 更加明確的選擇資料，找出對論文有用的參考資料，同時(shí)開始撰寫初稿。先理清論文的大綱，將主要框架制作完成，再思考細(xì)致的方面應(yīng)該怎樣去完成。制作作品時(shí)同步完成初稿的撰寫。 指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日 修改 完善 和 定稿 階段 進(jìn)展情況記錄： 對于格式進(jìn)一步檢查與規(guī)范，同時(shí)對于內(nèi)容中冗長部分的刪減，對描述不足部分進(jìn)行補(bǔ)充。對于作品不足的地方進(jìn)行修改同時(shí)修改論文，對圖片進(jìn)行編號。 指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日 XXXXXXXX學(xué)院 畢 業(yè) 論 文（設(shè) 計(jì)）評 審 表 班 級 XXXXXXXX 姓 名 XX 學(xué) 號 XXXXXXXX 設(shè)計(jì)（論文）題目 網(wǎng)站設(shè)計(jì)與制作（DIV+CSS) 指導(dǎo)教師 XX 評價(jià)內(nèi)容 評 語 滿分 評分 溝通與反饋 10分 調(diào)查論證、文獻(xiàn)查閱資料整理能力 20分 論文質(zhì)量 50分 論文特色、創(chuàng)新點(diǎn) 20分 論文（設(shè)計(jì)）總分 評閱人簽字： 年 月 日