網(wǎng)頁設(shè)計與制作 畢業(yè)論文.doc

XXXXXXXXXX學(xué)院畢 業(yè) 論 文論文（設(shè)計）題目： 網(wǎng)頁設(shè)計與制作 班 級： 姓 名： 學(xué) 號： 指導(dǎo)教師： 時間： 2016年 5月 30日XXXXXXXX學(xué)院畢業(yè)設(shè)計（論文）任務(wù)書班級XXXXXXXX姓名XX學(xué)號XXXXXXXX設(shè)計（或論文）題目網(wǎng)站設(shè)計與制作（DIV+CSS)指導(dǎo)教師姓名XX指導(dǎo)教師專業(yè)技術(shù)職稱高級工程師設(shè)計根據(jù)、內(nèi)容、技術(shù)要求，主要設(shè)計方法（或步驟：利用DIV+CSS技術(shù)為某公司設(shè)計一個公司介紹和產(chǎn)品銷售的網(wǎng)站。一、 緒論1國內(nèi)外電子商務(wù)發(fā)展的現(xiàn)狀2公司網(wǎng)站的重要性二、DIV+CSS網(wǎng)站設(shè)計與制作技術(shù)1. 網(wǎng)頁設(shè)計與制作的主要工具2. DIV+CSS技術(shù)介紹3. 網(wǎng)站制作流程三、某公司網(wǎng)站設(shè)計1. 確定公司創(chuàng)建網(wǎng)站的目的與意義2. 需求分析3. 設(shè)計工作流程4. 欄目設(shè)計四、公司網(wǎng)站制作 1. 設(shè)計草圖 2. 設(shè)計制作PSD模板 3. 利用DIV+CSS制作網(wǎng)站頁面五、總結(jié)六、致謝七、參考文獻設(shè)計步驟： 2016 年1月20-20 年2月20 日 學(xué)習(xí)、閱讀參考文獻并收集相關(guān)資料 2016年2月21日-20年月3月10日擬訂提綱 2016 年3月11日-20年4月30日撰寫初稿 2016 年5月1日-20 年5月30日修改、完善論文階段主要參考文獻、資料：參考文獻不少于十個1 中華人民共和國商務(wù)部，中國電子商務(wù)報告(2014)，中國商務(wù)出版社。2 美國零售市場研究報告，連鎖2014年6月刊。3 Ben Frain, 響應(yīng)式Web設(shè)計,人民郵電出版社.2015年7月3日4 李東博，Dreamweaver+Photosho網(wǎng)頁設(shè)計，清華大學(xué)出版社,2010要求完成時間2016年5月30日XXXXXXXX學(xué)院網(wǎng)站設(shè)計與制作（DIV+CSS)作者姓名（XX）內(nèi)容摘要：本文從電子商務(wù)發(fā)展出發(fā)，詳細講述了國內(nèi)外電子商務(wù)的發(fā)展已經(jīng)滲透到生活和工作的方方面面，而且電子商務(wù)技術(shù)也將成為新世紀商家不可缺少的發(fā)展道路。從電子商務(wù)的發(fā)展可以看出今后電子商務(wù)在企業(yè)中的地位，接下來將會介紹網(wǎng)站的制作流程，從設(shè)計頁面到前臺開發(fā)到后臺添加到交付給用戶使用。然后突出介紹設(shè)計和前臺開發(fā)。通過Div+Css技術(shù)來制作出能給后臺開發(fā)人員進行開發(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è)計與制作技術(shù)6第一節(jié) 網(wǎng)頁設(shè)計與制作的主要工具6第二節(jié) DIV+CSS技術(shù)介紹7第三節(jié) 網(wǎng)站制作流程7第三章 某公司網(wǎng)站設(shè)計8第一節(jié) 確定公司創(chuàng)建網(wǎng)站的目的與意義8第二節(jié) 需求分析8第三節(jié) 設(shè)計工作流程8第四節(jié) 欄目設(shè)計9第四章 公司網(wǎng)站制作9第一節(jié) 設(shè)計草圖9第二節(jié) 設(shè)計制作PSD模板11第三節(jié) 利用DIV+CSS制作網(wǎng)站頁面16第五章 總結(jié)28第六章 致謝29第1章 緒論第1節(jié) 國內(nèi)外電子商務(wù)發(fā)展的現(xiàn)狀電子商務(wù)，涵蓋的范圍很廣，一般可分為代理商、商家和消費者（Agent、Business、Consumer，即ABC）企業(yè)對企業(yè)(Business-to-Business，即 B2B），企業(yè)對消費者（Business-to-Consumer，即 B2C），個人對消費者(Consumer-to-Consumer，即 C2C），企業(yè)對政府（Business-to-Government）， 線上對線下（Online To Offline，O2O），商業(yè)機構(gòu)對家庭（Business To Family），供給方對需求方（Provide to Demand），門店在線（Online to Partner，O2P）等8種模式。近年電子商務(wù)在中國發(fā)展勢頭迅猛，從無到有成長了很多電子商務(wù)的大咖，中國的本土電商正在做大做強。北京時間2015年5月15日上午，商務(wù)部新聞發(fā)言人沈丹陽介紹中國電子商務(wù)報告（2014）時說，我國電子商務(wù)交易總額快速增長，已成為國民經(jīng)濟的重要增長點，并且國際影響力顯著增強。沈丹陽認為傳統(tǒng)企業(yè)將繼續(xù)加快進入電子商務(wù)領(lǐng)域的步伐，移動電子商務(wù)將繼續(xù)保持高速增長，大宗商品交易平臺將成為電子商務(wù)發(fā)展的熱點。在國外方面，從美國電子商務(wù)現(xiàn)狀入手分析。電子商務(wù)市場正以前所未有的速度騰飛而起，這主要是由少數(shù)平臺推動的。從圖1-1可以看出，F(xiàn)lipkart、Amazon Seller Central、Shopify和阿里巴巴全球速賣通（AliExpress）的流量正在不斷增長。圖 1-1 電子商務(wù)流量分析推動電子商務(wù)市場飛速發(fā)展的因素很多，包括更有吸引力的價格，更多更便捷的送貨渠道，這些市場采用的營銷手段等等。這種趨勢是向上的，在快遞網(wǎng)絡(luò)不斷健全的今天，電子商務(wù)的發(fā)展明顯呈現(xiàn)出加速增長的態(tài)勢。當(dāng)然，這四家平臺并不像產(chǎn)品那樣具有直接的可比性。Shopify支持的是賣家自己網(wǎng)站上的貿(mào)易，而亞馬遜、Flipkart和全球速賣通則為賣家們提供了一個市場平臺，賣家們在同一平臺上爭奪客戶。但是這張圖傳達出來的訊息是很明顯的，那就是大平臺支持小商店的情況將越來越普遍。在流量趨勢方面，世界各大電商正在壓縮美國電商，美國的巨頭將失去全球在線零售的大筆訂單而更加轉(zhuǎn)向本土，在這樣的增長態(tài)勢下，對于eBay、亞馬遜和沃爾瑪?shù)裙緛碚f將是壓力重重的。在美國電商網(wǎng)站方面，用戶參與度高的平臺的流量增長趨勢明顯大于用戶參與度低的平臺，并且電子商務(wù)變得更具有社交性，各電商網(wǎng)站擁有了分享功能。用戶的分享為平臺提供了一大部分流量，來自用戶對用戶的宣傳與討論也促進產(chǎn)品的銷售?？偨Y(jié)下來國內(nèi)外電商發(fā)展主要呈以下幾種趨勢：趨勢一：小商店將得到大平臺的支持趨勢二：美國的巨頭們將喪失對全球在線零售業(yè)的掌控趨勢三：用戶參與度將是一項更重要的因素趨勢四：電子商務(wù)將變得更具社交性電子商務(wù)越來越滲入每一個人的生活，在今后的發(fā)展中，會更加離不開電子商務(wù)。對于企業(yè)來說，拓展電子商務(wù)越來越必要。 第二節(jié) 公司網(wǎng)站的重要性在電子商務(wù)發(fā)展迅猛的今天，公司網(wǎng)站成為各大企業(yè)競爭的一項要點。各公司網(wǎng)站的功能與用戶體驗也影響用戶選擇公司。有利于提升企業(yè)形象企業(yè)網(wǎng)站的作用更類似于企業(yè)在報紙和電視上所做的宣傳企業(yè)本身及品牌的廣告?？梢匀嬖敿毜亟榻B企業(yè)及企業(yè)產(chǎn)品企業(yè)網(wǎng)站的一個最基本的功能，就是能夠全面、詳細地介紹企業(yè)及企業(yè)產(chǎn)品。企業(yè)可以把任何想讓人們知道的信息放入網(wǎng)站。如企業(yè)簡介、企業(yè)的人員、廠房、生產(chǎn)設(shè)施、研究機構(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è)的網(wǎng)址，就可以看到企業(yè)的產(chǎn)品和服務(wù)。因此，關(guān)鍵在于如何將企業(yè)網(wǎng)址推廣出去。公司網(wǎng)站在對于老客戶的溝通方面也非常方便，使用公司網(wǎng)站的電子郵件業(yè)務(wù)讓公司每年省下一大筆費用，同時實現(xiàn)對客戶的實時溝通也是非常重要的。第2章 DIV+CSS網(wǎng)站設(shè)計與制作技術(shù)第1節(jié) 網(wǎng)頁設(shè)計與制作的主要工具網(wǎng)頁設(shè)計工具：PS、CorelDraw、Ai、Flash等網(wǎng)頁制作的主要工具有：Dreamweaver、VisualStudio、Idea、PHPStorm、記事本等網(wǎng)頁設(shè)計與制作的工具有很多，很多軟件具有強大的開發(fā)輔助功能。設(shè)計方面需要一個圖像制作軟件，圖像處理軟件很多。功能強大并且越順手越適合使用，軟件需要提供切片功能。制作方面，Dreamweaver作為一個保姆型入門軟件將所有的方面考慮的很周全，讓網(wǎng)頁開發(fā)變得簡單。熟練后也會發(fā)現(xiàn)Idea工具非常好用。而后面提到了記事本，表明網(wǎng)頁的制作工具要求其實非常的低，是個文本編輯器基本都是可以制作網(wǎng)頁的，文本工具占用的磁盤空間非常小，而網(wǎng)頁的體積小也正是他流通的優(yōu)勢。本文接下來主要使用的工具有PS+VisualStudio。第二節(jié) DIV+CSS技術(shù)介紹DIV+CSS是WEB設(shè)計標準，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。提起DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML（標準通用標記語言的子集）基礎(chǔ)上優(yōu)化和改進的新語言，目的是基于XML應(yīng)用與強大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。通過外鏈樣式CSS，可以給網(wǎng)站進行模板制作，將樣式的編寫操作多次引用達到節(jié)省操作的目的。第三節(jié) 網(wǎng)站制作流程第一步：確定網(wǎng)站需求。 客戶將自己所要建設(shè)的網(wǎng)站功能以及相關(guān)要求告知設(shè)計人員，如想要的效果，開設(shè)的欄目，想要的風(fēng)格等。同時需提供網(wǎng)站制作的相關(guān)資料，產(chǎn)品描述，詳細的網(wǎng)站框架設(shè)計要求等。 第二步：制定網(wǎng)站制作方案 雙方就網(wǎng)站制作的內(nèi)容、風(fēng)格、細節(jié)等問題進行協(xié)商，以達成共識。為網(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è)計 網(wǎng)站的風(fēng)格包括很多方面，整個網(wǎng)站的總體風(fēng)格，每個欄目頻段自己獨有的風(fēng)格，網(wǎng)站基本框架的設(shè)計等。最后將初步做好的網(wǎng)站與客戶進行討論并加以改進。 第七步：網(wǎng)站制作 網(wǎng)站應(yīng)當(dāng)有一個很清晰的網(wǎng)站介紹，有一個簡潔的界面，需要告訴訪問者網(wǎng)站能夠提供些什么，以便訪問者能找到想要的東西。有效的導(dǎo)航條和良好的結(jié)構(gòu)，使人們很容易找到需要的產(chǎn)品，這對網(wǎng)站客戶很重要。 第八步：網(wǎng)站驗收 網(wǎng)站制作完成后，將會反復(fù)審核、測試、修改最后通過客戶的驗收，網(wǎng)站才算建好。 第九步：網(wǎng)站宣傳推廣工作 網(wǎng)站建好之后，需要對網(wǎng)站進行宣傳推廣，可以聘請網(wǎng)絡(luò)優(yōu)化團隊，為網(wǎng)站的搜索進行優(yōu)化。 第十步：網(wǎng)站后期維護 網(wǎng)站建成驗收以后，如果涉及到圖片文字更換及數(shù)據(jù)庫升級、修改漏洞及找回管理員密碼等情況需要修改網(wǎng)站，屬于網(wǎng)站的后期維護。第三章 某公司網(wǎng)站設(shè)計第一節(jié) 確定公司創(chuàng)建網(wǎng)站的目的與意義根據(jù)論文題目，以售酒公司作為例子，售酒公司需求一個在線售賣紅酒的網(wǎng)站。目的是發(fā)展公司的線上銷售業(yè)務(wù)，來推動公司收益。公司創(chuàng)建網(wǎng)站能有效的宣傳公司產(chǎn)品以及提高銷量，并且加入電子商務(wù)行列。第2節(jié) 需求分析首先公司售酒的網(wǎng)站需要一個在線能購買公司產(chǎn)品的功能，網(wǎng)站也需要頁面實現(xiàn)對于公司文化的介紹。對于每一件商品需要有一個產(chǎn)品詳情頁面，能通過后臺添加產(chǎn)品詳情信息。需要秒殺商品頁，能展示商品秒殺和記錄哪些用戶秒殺了商品。網(wǎng)站需要用多種方式來展示公司產(chǎn)品，不顯得單調(diào)死板，也不能顯得花里胡哨，體現(xiàn)公司文化的穩(wěn)重。首頁需要大圖來突出展示幾種商品，也需要小塊的商品展示以便于介紹更多商品。第3節(jié) 設(shè)計工作流程第一、對網(wǎng)站整體風(fēng)格的設(shè)計這是對網(wǎng)站整體框架的定位，對于紅酒行業(yè)，網(wǎng)站的風(fēng)格會有不一樣的風(fēng)格表現(xiàn)形式，在視覺上突出一種優(yōu)雅和高貴的感覺，讓用戶視覺上定位該站，符合用戶的視覺印象。加深網(wǎng)頁元素在用戶面前的表現(xiàn)力，增強用戶的購買欲。決定使用酒紅色作為全站的主色調(diào)，風(fēng)格上采用扁平化，使用塊狀的設(shè)計讓網(wǎng)站更加簡潔大氣。第二、進行網(wǎng)頁的布局設(shè)計網(wǎng)站的布局結(jié)構(gòu)性質(zhì)繼承上面第一步的表現(xiàn)風(fēng)格，在添加豐富的酒元素，用酒和優(yōu)雅去“熏陶”出每一個頁面。使頁面的表現(xiàn)帶動訪客的心靈。第三、產(chǎn)品目錄的平面設(shè)計；定好位，并布好局，設(shè)計大的div塊。暫時先不管塊中的內(nèi)容，先想好容器的擺放位置，將需要表現(xiàn)的東西的大塊先在頁面上擺放合適。隨后再進行更加細節(jié)方面的制作，將網(wǎng)站的整體制作成為psd文件，為接下來切圖做好準備。第四、各類專題廣告設(shè)計；好產(chǎn)品當(dāng)然要有好廣告，酒香也怕巷子深的哦，做個大大的廣告banner，這樣客戶在訪問網(wǎng)站的時候，知道當(dāng)前主要推薦的內(nèi)容是什么。突出某些產(chǎn)品或者服務(wù)，在網(wǎng)頁上添加各種廣告元素gif圖片、flash動畫等等，盡量吸引訪客的眼球，然后突出的表現(xiàn)想表現(xiàn)的東西，這樣就更加促成了轉(zhuǎn)換率了。第五、利用div+css制作網(wǎng)站頁面。網(wǎng)頁設(shè)計固然重要，但是最關(guān)鍵的是如何將網(wǎng)頁制作出來，設(shè)計和制作上面還會有不小的沖突，在切圖后將頁面排版出來，做出最初的div模型。制作時可以使用各種插件輔助工作，因為網(wǎng)上的js插件都是開源的，使用起來不用擔(dān)心版權(quán)問題。Div模型制作出來之后將各種產(chǎn)品的排版加入其中，使之成為一個完整的頁面。然后可以考慮網(wǎng)站的動畫效果問題。這個問題需要考慮的更多，對于各種瀏覽器的支持以及兼容性問題，爭取能兼容各大瀏覽器。第六、網(wǎng)站的測試與交互網(wǎng)頁的div+css排版制作完成后需要交給制作后臺的人員進一步工作，交付前需要進行兼容性測試，測試完成后將靜態(tài)的網(wǎng)頁文件交出進行后臺添加變成動態(tài)網(wǎng)頁。完成產(chǎn)品的添加以及各種功能的實現(xiàn)。第4節(jié) 欄目設(shè)計首頁導(dǎo)航欄：點擊導(dǎo)航欄能進行挑戰(zhàn)，本頁面內(nèi)跳轉(zhuǎn)。輪播欄：輪播欄展示公司主要推薦購買的三種產(chǎn)品。秒殺欄：倒計時秒殺，做出動畫顯示倒計時，使網(wǎng)頁看起來不是那么死板。產(chǎn)品展示欄：產(chǎn)品展示，通過后臺添加圖片和介紹在前臺展示，此處暫時只作為效果展示，不具備后臺。友情鏈接欄：網(wǎng)頁友情鏈接，將用于推廣網(wǎng)頁。鏈接可后臺添加，此處只作為效果展示。腳部聲明欄：必要的網(wǎng)頁聲明，否則違法，只作為效果展示。公司介紹頁公司介紹頁面主要為公司照片展示與公司文字介紹。產(chǎn)品詳情頁產(chǎn)品展示欄：展示產(chǎn)品的大圖，并且添加價格及優(yōu)惠。同時提供購買和加入購物車選項。產(chǎn)品詳情頁面：產(chǎn)品詳細介紹，以及優(yōu)惠詳情，各種信息可以加入其中，把想告訴客戶的全部放在詳情頁面中。限時搶購頁限時搶購商品展示欄：展示前面的限時搶購商品，提供搶購按鈕，并且時間到了才能搶。政策法規(guī)頁面結(jié)構(gòu)大體上與公司詳情頁一樣，可以排版圖文。第四章 公司網(wǎng)站制作第一節(jié) 設(shè)計草圖首先需要確定的是網(wǎng)頁的寬度，現(xiàn)在的主流顯示器的分辨率有1280*960（4:3屏幕）、1366*768（低分屏筆記本）、1440*900（低分屏寬屏）或者更高1080P、2160P等。設(shè)計網(wǎng)頁為了使這些分辨率的電腦都能使用，設(shè)計的寬度不能超過1280主流顯示器的寬度。又為了保證橫向的滾動條不會顯示出來，采用了1248px寬度。整個網(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)品如果有多個產(chǎn)品可以無限延伸下去。剩下的政策法規(guī)、公司簡介欄目只需要替換首腳部，中間使用圖文混排并居中即可。第二節(jié) 設(shè)計制作PSD模板使用工具PS制作網(wǎng)頁效果圖，并且使用切片工具將圖片切成小圖，避免不必要的背景色圖片浪費圖片資源，用戶加載慢。優(yōu)化網(wǎng)站打開速度和用戶體驗。制作時合理使用PS中的輔助線工具能讓網(wǎng)頁看起來格式對齊。先確定網(wǎng)站結(jié)構(gòu)是左右結(jié)構(gòu)還是一塊塊拼接或者瀑布流。確定后考慮配色，將網(wǎng)站的配色確定后，一塊一塊的設(shè)計完成組裝起來成為一個頁面，頁面可能比較長，超過10000px的頁面不能保存為psd，解決方法：保存為psb格式文件或者分成兩個psd分別保存與切片，都需要與開發(fā)人員寫注釋或者交流清楚。首先需要制作網(wǎng)站的頭部如圖4-3所示。圖 4-3 網(wǎng)頁設(shè)計1首先設(shè)計出網(wǎng)站的logo及加上起名等，在旁邊做出文字介紹等內(nèi)容。列出需要的頁面做出菜單，并將選中的菜單項目稍微調(diào)色表示選中，如圖4-4所示。圖 4-4 網(wǎng)頁設(shè)計2隨后制作搜索框，一定要保證文本與搜索框?qū)R，不然排版會顯得參差不齊。接下來制作輪播頁面，暫時先把輪播頁面的圖片排好版，將使用如下圖片示例，圖文混搭做出banner圖效果后?？梢栽诰W(wǎng)上下載按鈕等文件表示此圖將輪播，在圖片下方需要使用塊來告訴用戶有幾張輪播，可以通過點擊塊來跳轉(zhuǎn)頁面。圖 4-5 網(wǎng)站設(shè)計3圖片制作好后，把他加入到網(wǎng)頁中，插入按鈕等一定要注意對齊。圖 4-6 網(wǎng)站設(shè)計4接下來秒殺欄目使用網(wǎng)上的瓶裝葡萄酒圖片素材加上文案做出圖4-7效果：圖 4-7 網(wǎng)站設(shè)計5商品展示欄做出三個風(fēng)格差不多的樣式，都是使用上面標題加上下面小塊商品拼接而成，商品只是做出一個模板可以復(fù)制多個：圖 4-8 網(wǎng)站設(shè)計6最后制作腳部，再次強調(diào)文本一定要對齊，并且盡量不要使用宋體。由于LW紅酒只是作為示范沒有申請各種文件，此處使用x將聲明信息打碼，友情鏈接方面只作為樣式參考。圖 4-9 網(wǎng)站設(shè)計7整頁psd樣式，其中商品展示欄需要制作多個這里不再贅述：圖 4-10 網(wǎng)站設(shè)計8由于頁面太長，需要設(shè)計一個專門做導(dǎo)航來浮動顯示，隨時可以跳轉(zhuǎn)到位置，此處二維碼可以替換成為公司的手機站或者app，暫時使用無關(guān)的二維碼僅作示范。圖 4-11 網(wǎng)站設(shè)計9接下來使用切片工具仔細的將頁面中的圖片切出來，然后主頁就完成啦。圖 4-12 網(wǎng)站設(shè)計10接下來完成子頁面，子頁面基本都是單頁，使用ps將頁面設(shè)計完成。全站頭腳都使用首頁的樣子，只是稍微改動中間部分。圖 4-13 網(wǎng)站設(shè)計11當(dāng)然這個頁面中的所有文字都是可以更改的，價格標題都是為了給后臺開發(fā)人員作為樣式參考。然后是公司簡介，只需要替換頭腳中間圖文居中即可：圖 4-14 網(wǎng)站設(shè)計12政策法規(guī)頁面與公司簡介頁面一致。第3節(jié) 利用DIV+CSS制作網(wǎng)站頁面開始制作網(wǎng)站頁面，首先需要創(chuàng)建一個html文檔，根據(jù)HTML5標準寫上聲明：<!DOCTYPE html><html><head> <title>紅酒特賣</title></head><body></body></html>當(dāng)然也可以根據(jù)html4的標準聲明，這只是HTML5把他簡化了而已。使用很多軟件創(chuàng)建空白html文檔的時候會自動生成聲明?，F(xiàn)在需要將外部樣式表css鏈入文檔中，順便將需要使用的js也一起鏈接進去。比如jQuery庫和自己用來寫代碼的js。將以上說的這些寫在<head></head>中間。<link href="css/css.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/my.js"></script>根據(jù)前面設(shè)計好的草圖先大概做出div的框架。圖 4-15 網(wǎng)站制作1然后設(shè)計導(dǎo)航欄，使用hr標簽來把每個A標簽分隔開，之后在href中寫上鏈接的位置，頁面內(nèi)跳轉(zhuǎn)至div用#號表示。將鏈接處分別填上想要跳轉(zhuǎn)至的div。<div id="daohang"><a href="#">返回頂部</a><hr /><a href="#content">秒殺</a><hr/><a href="#content_one">名莊酒</a><hr/><a href="#content_two">菁英特薦</a><hr/><a href="#content_three">周年爆款</a><hr/><img src="images/erweima.jpg" width="120" height="120" /> <a id="close">關(guān)閉</a></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 acolor:#fff;font-family: "黑體"font-size: 18px;font-weight: bold;text-decoration: none;line-height: 40px;vertical-align: middle;然后開始制作頭部，將logo和搜索框制作出來，將需要的圖片命名好之后放入images文件夾，在wrap中添加代碼：<div class="logo"><img src="images/logo.jpg" alt="LW紅酒專賣網(wǎng)" /></div><div class="serach"><div class="serach_con"><input type="text" /><a href="javascript:void(0);"><img src="images/serach.png" alt="搜索" /></a></div><div class="hot_serach"><span>熱門：</span><a href="javascript:void(0);">博高干紅葡萄酒</a><a href="javascript:void(0);">伯爵冰葡萄酒</a><a href="javascript:void(0);">寶得根莊園紅葡萄酒</a></div></div>在css.css中定義好中間各class樣式將頁面的表現(xiàn)與psd中的展示一致。并且在a標簽的href中添加鏈接javascript:void(0);實現(xiàn)鼠標指針指上去時候變成手型并且不會進行任何跳轉(zhuǎn)。此鏈接在后期制作后臺的時候會替換掉。不然會影響到網(wǎng)站的seo，搜索引擎的權(quán)重會因為這個降低。然后是關(guān)于菜單的制作。菜單樣式在ps中有規(guī)定顏色，并且選中的菜單會有不一樣的效果，此處可以用切圖，但是會導(dǎo)致占用很多資源導(dǎo)致使用起來的用戶體驗降低。盡量要使用文字來解決這個問題。想起來畫面蠻復(fù)雜的，實際上菜單的前臺其實很簡單，使用ul、li標簽直接制作出來就可以了：<ul><li><a href="javascript:void(0);" class="selected">首頁</a></li><li><a href="javascript:void(0);">限時搶購 </a></li><li><a href="javascript:void(0);">預(yù)售</a></li><li><a href="javascript:void(0);">公司簡介</a></li><li><a href="javascript:void(0);">政策法規(guī)</a></li><li><a href="javascript:void(0);">購買咨詢</a></li></ul>菜單可以出效果的主要原因是定義樣式，在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)成型了，還差一個選擇的效果，給它定義一個class=”selected”。并且在css中加入：.nav_menu ul li a:hover, .nav_menu ul li a.selected background-color:#8C0903;text-decoration: none;這樣子菜單的樣式就已經(jīng)完成了，hover定義將鼠標指上去時，而平時高亮顯示出來的菜單，只需要給它加上一個selected的樣式就可以了。接下來需要給購買咨詢添加一個彈出電話號碼的提示框的事件，在購買咨詢中加入：onclick="alert('請撥打電話028-*');"如下樣式：<li><a href="javascript:void(0);" onclick="alert('請撥打電話028-*');">購買咨詢</a></li>輪播的頭圖可以去網(wǎng)上找jQuery插件修改起來比較方便，找到合適的輪播插件下載下來后，將自己的圖片替換上去，并且自己修改一些參數(shù)，比如速度，輪播的動畫方式。前臺使用規(guī)定格式的代碼不要出錯，不然插件也會出問題，還有就是記得要引用jQuery。接下來是搶購欄目了，因為之前ps中制作到這個欄目都是用的圖片，所以在做網(wǎng)頁的時候也非常方便，做好div用img標簽把圖片放進去就好了：<div id="content"><div id="content_mid" class="mid"><div id="tu_1"><img id="tu1" src="images/prod01.jpg" width="239" height="478" /></div> <div id="tu_2"><img id="tu2" src="images/prod02.jpg" width="239" height="478" /> </div><div id="tu_3"><img id="tu3" src="images/prod03.jpg" width="239" height="478" /></div><div id ="tu_4"><img id="tu4" src="images/prod04.jpg" width="239" height="478" /></div></div></div>對于class：mid定義的是居中，下面會引用好幾次，所以作為class寫入外部css中，psd中可以看出這個頁面的背景是填充滿頁面的，所以需要定義外面包含的大塊#content：#contentbackground:#fdd42e;商品展示頁面需要將標題制作成圖片居中：<div id="content_one_pic"><img src="images/title06.jpg" width="938" height="270" /></div>將圖片放好之后就要慢慢的去制作商品的模板了，由于商品價格和標題以及介紹都是后臺要能改動的，所以不能使用圖片直接來放在頁面上。先制作出一個商品的展示塊：<div class="jiu"><div class="jiu_one"><img style="float:left;" src="images/jiu_1.jpg" width="93" height="177" /><div class="name"><a href="javascript:void(0)" title="寶得根莊園紅葡萄酒2010(名莊預(yù)售)">寶得根莊園紅葡萄酒2010(名莊預(yù)售)</a></div><div class="price">￥1888</div><div class="font_hide"><a>波爾多梅多克1855分級列級酒莊之5級列莊(5st GCC en 1855)</a> </div></div><div class="jiu_two"><div style="height:5px;"></div><div class="price_old">原價：￥3500<br />立?。海?612</div><div class="lijiqianggou"><a href="#">&nbsp;&nbsp;立即<br />&nbsp;&nbsp;搶購</a></div></div></div>后面還需要制作很多個這樣的商品展示塊，所以不能使用id來選擇。中間所有的樣式全部用class選擇。其中的各種需要細心慢慢去調(diào)整，必要時可以更改定位方式position屬性，relative屬性是相對定位，相對于之前的容器。float屬性使用時要注意方法不要影響到之后的樣式。css樣式中這樣寫：.jiuwidth:230px;height:240px;background:#f63;float:left;margin-right:5px;margin-bottom:5px;.jiu_onewidth:230px;height:190px;background:#fff;.jiu_twowidth:230px;height:50px;background:#F63;.font_hide position: relative;left: 0px;top: -72px;width:130px;height:43px;overflow:hidden;background:#fff;然后可以將這一塊商品展示復(fù)制8次，變成頁面上的樣子，并且根據(jù)文案修改成不一樣的文字、價格查看效果：圖 4-16 網(wǎng)站制作2緊接著會發(fā)現(xiàn)當(dāng)介紹的文案過長時div裝不下那么多字只顯示出來一半，需要做一個隱藏顯示操作來將所有的文案顯示出來，之前定義的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 atext-decoration:none;color:#111;font-weight: bold;特別注意.font_hide中要加入兩條屬性，一個是透明度，一個是層次：opacity:0.7;z-index:10;當(dāng)鼠標移動上去的時候，這個div的高度變成了170像素，鼠標移開之后又恢復(fù)原樣。并且這個介紹文字會有一個透明度70%。下面來查看效果：圖 4-17 網(wǎng)站制作3圖 4-18 網(wǎng)站制作4然后制作第二第三個商品展示欄目的時候，可以整體復(fù)制第一個商品展示欄目改掉id為content_one和content_two。然后將設(shè)計好的標題替換掉之前的圖片，配色方案選擇好。不要看起來特別奇怪，將背景顏色改變后可以進行進一步的商品管理設(shè)計。想要在第三個商品展示欄加上如圖4-19效果的模塊：圖 4-19 網(wǎng)站制作5這其實也非常簡單，只需要在content_two中，所有的div class=”jiu”之上加入兩個div。這也是div與css技術(shù)非常方便的一點，可以像制作表格一樣隨意插入在某div上面。<div><img src="images/lb_01.jpg" width="465" height="315" border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="341,243,452,299" href="#" /></map><img src="images/lb_02.jpg" width="465" height="315" border="0" usemap="#Map2" /><map name="Map2" id="Map2"><area shape="rect" coords="341,243,451,299" href="#" /></map></div>使用map屬性來給圖片加上鏈接，使用戶能夠點擊搶購按鈕跳轉(zhuǎn)。最后把友情鏈接和聲明做好，由于都是文本，所以做起來格外簡單。要注意的是字體千萬不要用宋體，會顯得與網(wǎng)站其他內(nèi)容格格不入，代碼如下：<div class="link"><div class="wrap clear_float"><div class="link_left"><span>友情鏈接：</span></div><div class="link_right"><a href="#">百度</a><a href="#">新浪</a><a href="#">開放平臺</a><a href="#">誠聘英才</a><a href="#">聯(lián)系我們</a><a href="#">網(wǎng)站合作</a><a href="#">法律聲明</a><a href="#">廉正舉報</a><a href="#">阿里巴巴集團</a></div></div></div><div class="footer"><div class="wrap"><div>Copright XXXXXXXXXXXXXXXX All Rights Receved</div><div>蜀ICP備xxxxxxxxxxxx號 XXXXXX 版權(quán)所有</div><div>聯(lián)系電話：xxxxxxxxxxxxx</div></div></div>緊接著添加css：.linkpadding: 15px 0;background-color: #e5e5e5;position: relative;.link .link_left, .link .link_rightfont-size: 13px;.link .link_leftfloat: left;.link .link_left spancolor: #FD9909;.link .link_rightmargin-left: 65px;.link .link_right adisplay: inline-block;color: #444;margin-right: 15px;vertical-align: middle;.footermin-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時，需要修改路徑：href="./css/css.css" 。把首頁的頭部和菜單復(fù)制過來，并且需要修改class="selected"的位置到公司簡介位置：<li><a href="javascript:void(0);" class="selected">公司簡介</a></li>然后將頁面的友情鏈接和聲明復(fù)制過來放在頁面最下部。根據(jù)前面設(shè)計的psd模板，設(shè)計頁面結(jié)構(gòu)設(shè)計出來：<div style="background-color:#202020; "><center><h1 style="color:#b89d63; font-family:Microsoft YaHei;">LW紅酒葡萄園</h1></center><div style="background-color:#202020; color:#fff;margin-left:auto; margin-right:auto;width:980px;"><hr style=" border:1px solid #b89d63"/><p>&nbsp;</p><div><center><img src="./images/2016422.jpg" width="800px"></center></div><div ></div></div></div>將簡介的內(nèi)容放在P標簽中加入頁面，公司簡介頁面就制作完成了，然后需要做一個鏈接的跳轉(zhuǎn)，首先找到首頁的公司首頁a標簽將鏈接添加好：<a href="html/gs.html">公司簡介</a>。隨后找到公司簡介頁面的a標簽修改：<a href="./index.html" >首頁</a>。制作政策法規(guī)頁面時，直接將gs.html復(fù)制一份，因為大體框架都是一樣的，只需要替換中間的文案部分。將圖片刪除，標題替換到hr標簽中，正文每一段使用一個p標簽。稍微再調(diào)整一下行距、樣式等，政策法規(guī)頁面就完成了。然后修改完成的三個頁面的鏈接跳轉(zhuǎn)，使制作出來的頁面可以互相跳轉(zhuǎn)。菜單欄selected一定要記得剪切到政策法規(guī)標簽中了，樣式就出來啦：圖 4-20 網(wǎng)站制作6搶購頁面也是按照之前做好的模板樣式來制作，首先拷貝首頁的頭腳部分，將css和jQuery引用。然后開始制作產(chǎn)品的排版。首先需要一個鋪滿全網(wǎng)頁的背景：<div style="background-color:#202020; "></div>將背景樣式定義好之后，把產(chǎn)品展示的div放在其中，排版的效果按照psd中顯示的一樣。其中中間塊的背景色在ps中吸取產(chǎn)品上面的顏色。代碼如下：<div class="w100" ><div class="mid" style="background-color:#b50025;"> <img class="left" src="./images/prod01.jpg" width="239" height="478"/> <div class="left" style="width:740px;"><center><h1 class="xxh1">博高干紅葡萄酒</h1></center><div class="xxa"><a >博高干紅葡萄酒介紹XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXX XXXXXXXXXXX XXXXXX XXXXXXXXXX</a><img src="./images/99rmb.png" /><center><a href="javascript:void(0);" style=" font-size:50px;"><strong>立即搶購</strong></a></center></div></div><div style="clear:both;"></div></div></div >Css樣式如下：.xxh1color:White;font-family: "微軟雅黑"font-size:60px;.xxatext-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;.leftfloat:left;.w100width:100%;此頁面中通過浮動的方法使所有的文字圖片等完成psd中的效果，當(dāng)然文字與價格僅僅是作為一個樣式示范來給后天開發(fā)人員看到效果，而所有的文字都是會從數(shù)據(jù)庫中讀取的。制作好一段之后在瀏覽器中查看效果：圖 4-21 網(wǎng)站制作7然后復(fù)制四段，替換掉其中的圖片和背景顏色。發(fā)現(xiàn)所有的產(chǎn)品都在一邊，然后找到img標簽中的 class="left" ，如果需要產(chǎn)品圖片顯示在右邊，將其刪除即可。然后查看效果：圖 4-22 網(wǎng)站制作8成功，頁面完成。檢查所有頁面菜單欄跳轉(zhuǎn)鏈接，網(wǎng)站基本完成。第五章 總結(jié)制作一個網(wǎng)站需要多個頁面，當(dāng)需要制作一個網(wǎng)頁時，那不會很難。當(dāng)制作一個優(yōu)秀的網(wǎng)站時，那工作量就大了。需要確定整站風(fēng)格，確定整站樣式，整站需求，還有站內(nèi)跳轉(zhuǎn)，數(shù)據(jù)來源等等。還有一系列工序，本文僅僅是介紹了div+css技術(shù)制作能交付后臺開發(fā)使用的網(wǎng)頁。在電子商務(wù)飛速發(fā)展的今天，學(xué)好html將成為求職路上一塊重量級的敲門磚。第6章 致謝在這次論文寫作之前對于div+css實戰(zhàn)經(jīng)驗缺乏的我，通過對于這次論文的寫作扎實了自己的知識。在這短短幾個月的時間學(xué)習(xí)到了許多書本上學(xué)習(xí)不到的知識，感謝學(xué)校對于論文寫作的規(guī)范要求，讓我對于文章的排版大有改善。隨著畢業(yè)設(shè)計的完成，我也將要畢業(yè)了，再也無法像過去三年可以在學(xué)校吃，在學(xué)校住，在學(xué)校學(xué)習(xí)。感謝學(xué)校三年來對我的栽培，感謝計科系老師的教導(dǎo)。特別要感謝的是我的論文指導(dǎo)老師XX。大學(xué)期間擔(dān)任科代表，學(xué)到的知識遠超過其他同學(xué)。不光是學(xué)習(xí)，青老師還處處指導(dǎo)方方面面的小事情。大學(xué)期間什么事情都有與青老師商量的習(xí)慣，也耽誤了老師不少時間。青老師也沒有不耐煩過，謝謝您的教導(dǎo)。在論文寫作期間，老師也處處指導(dǎo)，仔仔細細檢查論文格式以及內(nèi)容上面需要修改的地方。相信整篇論文一定花了不少時間吧，讓您費心了。再次感謝論文指導(dǎo)老師XX。感謝實習(xí)指導(dǎo)老師林超對論文寫作的指導(dǎo)與幫助。感謝網(wǎng)絡(luò)資料以及參考文獻的分享者。 參考文獻1 中華人民共和國商務(wù)部，中國電子商務(wù)報告(2014)，中國商務(wù)出版社。2 美國零售市場研究報告，連鎖2014年6月刊。3 Ben Frain, 響應(yīng)式Web設(shè)計,人民郵電出版社，2015年7月3日4 李東博，Dreamweaver+Photosho網(wǎng)頁設(shè)計，清華大學(xué)出版社,20105 喻浩，CSS+DIV網(wǎng)頁樣式與布局，清華大學(xué)出版社,20136 陳濤，電商內(nèi)幕傳統(tǒng)企業(yè)進入電商的必修課，電子工業(yè)出版社,2014.4.17王日芬.丁晟春.電子商務(wù)網(wǎng)站設(shè)計與管理，北京大學(xué)出版社,2012.108王海軍.網(wǎng)頁設(shè)計與制作，機械工業(yè)出版社出版社,2008.6.18Mark 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è)計）實施過程記錄表畢業(yè)論文（設(shè)計）題目網(wǎng)站設(shè)計與制作（DIV+CSS)指導(dǎo)教師XX班級XXXXXXXX姓名XX學(xué)號XXXXXXXX選題與布置任務(wù)書階段進展情況記錄：搜集資料查閱，明白選擇的題目的主要內(nèi)容，選擇合適的題目。確定任務(wù)書上的要求，給自己一個明確的方向，以便于接下來工作的開展。大范圍的選擇相關(guān)資料備用。指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日資料收集和初稿撰寫階段進展情況記錄：更加明確的選擇資料，找出對論文有用的參考資料，同時開始撰寫初稿。先理清論文的大綱，將主要框架制作完成，再思考細致的方面應(yīng)該怎樣去完成。制作作品時同步完成初稿的撰寫。指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日修改完善和定稿階段進展情況記錄：對于格式進一步檢查與規(guī)范，同時對于內(nèi)容中冗長部分的刪減，對描述不足部分進行補充。對于作品不足的地方進行修改同時修改論文，對圖片進行編號。指導(dǎo)教師指導(dǎo)意見： 指導(dǎo)教師簽名 年 月 日XXXXXXXX學(xué)院畢 業(yè) 論 文（設(shè) 計）評 審 表班 級XXXXXXXX姓 名XX學(xué) 號XXXXXXXX設(shè)計（論文）題目網(wǎng)站設(shè)計與制作（DIV+CSS)指導(dǎo)教師XX評價內(nèi)容評 語滿分評分溝通與反饋10分調(diào)查論證、文獻查閱資料整理能力20分論文質(zhì)量50分論文特色、創(chuàng)新點20分論文（設(shè)計）總分評閱人簽字： 年 月 日