好的塑業(yè)網(wǎng)頁設(shè)計(jì)-職業(yè)學(xué)院畢業(yè)論文

1、<p><b>　　嘉興職業(yè)技術(shù)學(xué)院</b></p><p><b>　　畢業(yè)設(shè)計(jì)（論文）</b></p><p>　　題目名稱：好的塑業(yè)網(wǎng)頁設(shè)計(jì)</p><p>　　姓 名：張思思 </p><p>　　所在分院：信息技術(shù)分院</p><p>　　專業(yè)班級(jí)：

2、計(jì)算機(jī)應(yīng)用技術(shù)142班</p><p><b>　　指導(dǎo)教師：金志鵬</b></p><p>　　2016年 12 月31 日</p><p><b>　　目 錄</b></p><p><b>　　摘要1</b></p><p><b>

3、　　關(guān)鍵詞1</b></p><p><b>　　引言1</b></p><p><b>　　1.設(shè)計(jì)思想2</b></p><p><b>　　2.語言2</b></p><p>　　3.網(wǎng)站制作流程與主要內(nèi)容2</p><p>

4、<b>　　4.設(shè)計(jì)稿說明2</b></p><p>　　4.1首頁(index.html)3</p><p>　　4.2關(guān)于我們頁(aboutUs.html)3</p><p>　　4.3留言頁（leave a message.html）7</p><p>　　5.設(shè)計(jì)過程的問題與解決辦法8</p>

5、;<p><b>　　6.結(jié)論8</b></p><p><b>　　7.致謝9</b></p><p><b>　　參考文獻(xiàn)9</b></p><p><b>　　作者簡介9</b></p><p><b>　　好的塑業(yè)網(wǎng)

6、頁設(shè)計(jì)</b></p><p>　　嘉興職業(yè)技術(shù)學(xué)院 張思思 計(jì)算機(jī)142班 143061235</p><p>　　指導(dǎo)老師：金智鵬 職務(wù)：副教授</p><p><b>　　摘 要</b></p><p>　　隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，互聯(lián)網(wǎng)越來越進(jìn)入我們的生活給我們帶來方便，一夜網(wǎng)站給客戶了解一個(gè)企

7、業(yè)帶來便利。因此企業(yè)的發(fā)展也需要一個(gè)網(wǎng)站來宣傳他們的公司形象和產(chǎn)品。本文詳細(xì)介紹了好的塑業(yè)網(wǎng)站設(shè)計(jì)與制作。通過設(shè)計(jì)思路、設(shè)計(jì)語言、設(shè)計(jì)稿詳細(xì)說明、設(shè)計(jì)制作過程中遇到的問題和相對應(yīng)的解決方法等信息來講解如何制作并完成該網(wǎng)站的設(shè)計(jì)制作。本文重點(diǎn)描述了設(shè)計(jì)稿的布局和色彩搭配，通過設(shè)計(jì)搞的詳細(xì)說明來闡述好的塑業(yè)網(wǎng)站的設(shè)計(jì)理念和風(fēng)格走向。</p><p>　　網(wǎng)站的設(shè)計(jì)稿主要版面有：首頁、內(nèi)容頁等兩大大板塊。重點(diǎn)說明首頁的

8、布局和色彩搭配設(shè)計(jì)，布局設(shè)計(jì)可以讓網(wǎng)站的信息得到充分的展示，恰到好處的色彩搭配能提升整個(gè)網(wǎng)站的文化底蘊(yùn)以及加大網(wǎng)站的美觀度。</p><p><b>　　關(guān)鍵詞</b></p><p>　　網(wǎng)站；網(wǎng)頁；企業(yè)形象；產(chǎn)品宣傳；好的塑業(yè)；網(wǎng)頁設(shè)計(jì)</p><p><b>　　引言</b></p><p>

9、　　宣傳在企業(yè)的發(fā)展中起很重要的位置，那么網(wǎng)站在宣傳公司形象和公司產(chǎn)品中起著更加重要的位置。有一個(gè)好的網(wǎng)站，能讓客戶留下深刻影響，增加好感。所以網(wǎng)站在現(xiàn)代企業(yè)網(wǎng)站中起著非常重要的地位。根據(jù)不同的企業(yè)類型和想要宣傳方向來決定制作一個(gè)怎么樣的網(wǎng)站。</p><p>　　網(wǎng)站要在操作，設(shè)計(jì)感，和交互上都做到統(tǒng)一才是個(gè)好網(wǎng)站，既美觀，又實(shí)用，光是有好看的頁面，但是并沒有什么功能，都是沒有什么用的。這樣的前提下，網(wǎng)頁設(shè)計(jì)師

10、就顯得尤為重要。本網(wǎng)站通過色彩搭配和網(wǎng)站內(nèi)容傳達(dá)出了公司的形象：專業(yè)、大氣。</p><p><b>　　1.設(shè)計(jì)思想</b></p><p>　　該網(wǎng)站是網(wǎng)頁設(shè)計(jì)網(wǎng)站，用來介紹宣傳公司產(chǎn)品和企業(yè)形象。</p><p>　　在網(wǎng)站布局上走現(xiàn)代簡約的設(shè)計(jì)風(fēng)格。簡約、現(xiàn)代化、追求網(wǎng)站的實(shí)用性和便利性。本網(wǎng)站的布局設(shè)計(jì)不同于一般傳統(tǒng)網(wǎng)站的的設(shè)計(jì)風(fēng)格，

11、給人的第一印象就是現(xiàn)代和風(fēng)格突出，色塊之間的對比明顯能突出重點(diǎn)。在網(wǎng)站色調(diào)的搭配上，以藍(lán)色為網(wǎng)站主基調(diào)，體現(xiàn)網(wǎng)站的大氣和專業(yè)。</p><p><b>　　2.語言</b></p><p>　　網(wǎng)站是由html構(gòu)成,div+css是網(wǎng)站的主體，為了增加網(wǎng)站的交互性與動(dòng)感，運(yùn)用了很多jq代碼以及其他js代碼。提高客戶體驗(yàn)，追求簡潔的代碼和好的體驗(yàn)。</p>

12、<p>　　3.網(wǎng)站制作流程與主要內(nèi)容</p><p><b>　　網(wǎng)站制作的流程：</b></p><p>　　與客戶交流想要網(wǎng)站的風(fēng)格、類型以及色調(diào)。網(wǎng)站類型大致為：中國風(fēng)、簡約風(fēng)、日韓風(fēng)等。網(wǎng)站類型大致為：產(chǎn)品營銷型、公司宣傳性、信息門戶型。經(jīng)常幾天的交涉了解，以及對舊網(wǎng)站的分析。決定以藍(lán)色為主色調(diào)。定位為產(chǎn)品宣傳型網(wǎng)站。然后做了幾個(gè)初稿給客戶，經(jīng)過

13、反復(fù)的討論，最終決定為現(xiàn)在的這個(gè)設(shè)計(jì)稿。</p><p><b>　　4.設(shè)計(jì)稿說明</b></p><p>　　本網(wǎng)站的設(shè)計(jì)稿主要有6大頁面：首頁、關(guān)于我們、聯(lián)系我們、新聞中心、客戶留言根據(jù)這6個(gè)版面來制作網(wǎng)站，網(wǎng)站的信息得到充分的展示，并且6個(gè)版面各具特色，但同時(shí)又形成一個(gè)整體。</p><p><b>　　4.1色彩搭配<

14、/b></p><p>　　整個(gè)網(wǎng)站用了深藍(lán)色#0168b7，灰色#e4e1e1，黑色#000000為主要色調(diào)，烘托出網(wǎng)站的大氣與專業(yè)。如圖4-1。色調(diào)冷靜統(tǒng)一。和諧自然。</p><p><b>　　圖4-1</b></p><p>　　4.2首頁(index.html)</p><p>　　首頁是一個(gè)網(wǎng)站的門面

15、，首頁的設(shè)計(jì)成功與否，直接影響到整個(gè)網(wǎng)站的品味和水準(zhǔn)，而首頁當(dāng)中又以banner為最主要的部分。該網(wǎng)站的風(fēng)格偏向簡約，在版面的設(shè)計(jì)上打破了傳統(tǒng)網(wǎng)站設(shè)計(jì)的呆板布局。</p><p>　　網(wǎng)頁總體設(shè)計(jì)效果如圖4-1所示。</p><p>　　導(dǎo)航：網(wǎng)站的導(dǎo)航設(shè)計(jì)放在頁面的最頂部，logo顏色采用紅色，和banner中產(chǎn)品的紅色相互呼應(yīng)，和諧又突出。讓人一目了然，方便用戶點(diǎn)擊與查看信息。導(dǎo)航的內(nèi)

16、容設(shè)計(jì)上，當(dāng)鼠標(biāo)經(jīng)過的時(shí)候?qū)?yīng)的字體顏色會(huì)加粗，背景也會(huì)變換顏色，不僅考慮到網(wǎng)站的用戶體驗(yàn)還增加了網(wǎng)站的動(dòng)感。也放了搜索框，可以可以自行檢索想要了解的產(chǎn)品。</p><p>　　Banner加入了輪播的代碼，會(huì)自動(dòng)切換banner也可以手動(dòng)切換banner，最大化利用客戶停留在頁面上的時(shí)間進(jìn)行宣傳。</p><p>　　第一張Banner：用深藍(lán)色地球做背景，再疊加了白色的公司名稱，顯得大

17、氣又專業(yè)，白色的晨光劃破了天際，令人眼前一亮，印象深刻！使用主色調(diào)深藍(lán)色，再加上蒼勁有力的毛筆字體書上公司名字。海報(bào)的左上角加上公司的網(wǎng)址。客戶會(huì)記住公司的名字。如圖4-1所示。</p><p>　　第二張Banner：在黑色的背景上放了產(chǎn)品圖，經(jīng)過處理的專業(yè)的產(chǎn)品處理后，為了突出公司產(chǎn)品。因?yàn)槲陌鸽m然重要，但是圖片比起文字是更加直觀，更能留下深刻印象的。公司主營玻璃閥門，塑料閥門等。選擇的是銷量最好的轉(zhuǎn)化率最好

18、的玻璃閥門。最大化利用最好的位置。如圖4-2所示。</p><p><b>　　圖4-2海報(bào)1</b></p><p><b>　　圖4-3海報(bào)2</b></p><p>　　內(nèi)容頭部：內(nèi)容部分分為;公司產(chǎn)品、銷售網(wǎng)絡(luò)、榮譽(yù)資質(zhì)、新聞資訊。</p><p>　　首頁內(nèi)容最上面部分是產(chǎn)品中心，以色塊分

19、隔，吸引人們的眼球。眼實(shí)現(xiàn)吸引到產(chǎn)品上去。還有個(gè)類似于大括號(hào)的符號(hào)，鏈接的是其它的產(chǎn)品。</p><p>　　首頁第二部分放了銷售網(wǎng)絡(luò)、榮譽(yù)資質(zhì)二大類信息。藍(lán)色區(qū)塊和銷售網(wǎng)絡(luò)圖與榮譽(yù)資質(zhì)圖都是可以鏈接到相應(yīng)的網(wǎng)頁的。將鼠標(biāo)移到藍(lán)色色塊上藍(lán)色色塊會(huì)變換顏色，提醒人們這是一個(gè)鏈接。豐富了整個(gè)網(wǎng)頁的樣式。</p><p>　　首頁第三部分放了新聞資訊。新聞資訊板塊加入了tab切換技術(shù)，移動(dòng)到公司

20、新聞上市會(huì)切換到公司新聞，移動(dòng)到行業(yè)新聞上是會(huì)切換到行業(yè)新聞。讓人們更多關(guān)注到更多玻璃鋼管行業(yè)和塑業(yè)的新聞，讓人們意識(shí)到這個(gè)塑料鋼管和塑業(yè)產(chǎn)品在現(xiàn)代生活中的重要性，激發(fā)客戶群體的購買欲。</p><p>　　內(nèi)容文字：網(wǎng)站的正文字體為規(guī)范的微軟雅黑、字體大小12px、行高26px。</p><p>　　頁腳：頁腳部分以網(wǎng)站的主色調(diào)黑色為背景色，文字為白色，整體與網(wǎng)站頭部呼應(yīng)，不會(huì)顯得頭重腳

21、輕。內(nèi)容上放了快速導(dǎo)航信息以及版權(quán)信息。</p><p>　　還有加入了會(huì)到頂部和分享代碼，因?yàn)榫W(wǎng)頁較長，客戶瀏覽后想跳回最上面，點(diǎn)擊代碼即可。還添加了在線客服功能，如果客戶覺得有想要了解的想法可以直接打開和客服的qq聊天窗口，或是掃描上面的微信二維碼進(jìn)行添加好友。在上面也有公司的號(hào)碼，可以直接進(jìn)行撥打。再點(diǎn)擊一下在線客服功能就會(huì)收回。</p><p><b>　　圖4-4<

22、;/b></p><p>　　4.2 關(guān)于我們(About us.html)</p><p>　　關(guān)于我們頁面介紹了公司的的基本情況以及放一張公司的工人生產(chǎn)的圖片</p><p><b>　　圖4-5</b></p><p>　　4.3留言頁（leave a message.html）</p><

23、;p>　　留言頁的設(shè)計(jì)以新聞列表頁為前身，在內(nèi)容上面做了排版，適當(dāng)?shù)淖煮w、文字大小以及行高讓內(nèi)容排版更加規(guī)范化，使得頁面整潔有序又大氣。</p><p><b>　　圖4-6</b></p><p>　　5.設(shè)計(jì)過程的問題與解決辦法</p><p>　　網(wǎng)站的設(shè)計(jì)和制作過程中，運(yùn)用到多種應(yīng)用工具以及多方面的技術(shù)。當(dāng)需要把多種知識(shí)和功能同時(shí)

24、用上時(shí)，不乏會(huì)出現(xiàn)一些突發(fā)問題。好的塑業(yè)網(wǎng)頁的設(shè)計(jì)過程，就是一個(gè)不斷地出現(xiàn)問題、解決問題的過程。</p><p>　　問題出現(xiàn)之前要預(yù)防，出現(xiàn)問題之后要選擇正面突破。以下例舉了在本網(wǎng)站的設(shè)計(jì)與制作過程中遇到的問題以及對應(yīng)的解決辦法。</p><p>　　可以通過客戶喜歡的網(wǎng)站來了解客戶喜歡的風(fēng)格，再結(jié)合客戶的需求制作成客戶喜歡的網(wǎng)頁顏色。再結(jié)合博大精深的ps，ps是一個(gè)博大精深的工具，通過

25、ps制作效果圖，來不斷地調(diào)整成客戶想要的效果，再用dw來制作頁面。</p><p>　　配色是一大重點(diǎn)，合理恰當(dāng)?shù)纳蚀钆涫蔷W(wǎng)站的設(shè)計(jì)要求。本網(wǎng)站的logo顏色主色是紅色，黃色一般應(yīng)用于電商的網(wǎng)頁色彩搭配。而本網(wǎng)站的主題是企業(yè)網(wǎng)站設(shè)計(jì)，企業(yè)網(wǎng)站還是要整體弘揚(yáng)企業(yè)形象和宣傳公司產(chǎn)品。如何才能將顏色進(jìn)行更好的搭配呢？</p><p>　　解決方法：考慮到色調(diào)上要和logo的顏色相呼應(yīng)。將冷暖色

26、相互呼應(yīng)，就將藍(lán)色作為主色，是網(wǎng)站看起來大氣、專業(yè)，正符合該公司的特質(zhì)需求。</p><p>　　文件也放在各自的文件夾里。避免錯(cuò)放亂放。代碼出錯(cuò)。</p><p><b>　　6.結(jié)論</b></p><p>　　在網(wǎng)頁設(shè)計(jì)中最重要的就是溝通，透徹了解客戶的想法，為避免后續(xù)做程序是大量修改做好準(zhǔn)備，再用扎實(shí)的代碼基本快速制作網(wǎng)頁網(wǎng)頁設(shè)計(jì)就是在

27、不斷的學(xué)習(xí)新技術(shù)、不斷樹立新思路，這樣未來的設(shè)計(jì)理念和思想才能走在前端。不能被自己狹窄的視野所局限，創(chuàng)新才是發(fā)展自我的硬道理。畢業(yè)設(shè)計(jì)以及平時(shí)的項(xiàng)目都要做好積累，這樣在用的時(shí)候才能快速的找到，直接添加修改即可。而且要不斷地從平時(shí)的書本理論學(xué)習(xí)中跳脫出來，結(jié)合實(shí)際情況去處理問題。這次的畢業(yè)設(shè)計(jì)讓我對ps、dw、以及實(shí)際的項(xiàng)目有了更深的理解，讓我對更好的融入社會(huì)做了更好的過渡。讓我對未來的道路更加增強(qiáng)了信心。</p><

28、p><b>　　7.致謝</b></p><p>　　通過這段時(shí)間的努力，我的畢業(yè)論文《好的塑業(yè)網(wǎng)頁設(shè)計(jì)》終于完成了，這也意味著大學(xué)三年的學(xué)習(xí)生涯即將結(jié)束。在大學(xué)階段，我在學(xué)習(xí)上和思想上都受益匪淺，要感謝老師和同學(xué)們的幫助和支持與鼓勵(lì)，感謝每一個(gè)幫助過我們的人。</p><p>　　3年時(shí)間受益匪淺，感謝大家。</p><p><b

29、>　　參考文獻(xiàn)</b></p><p>　　[1] ACAA專家委員會(huì)，DDC傳媒. Adobe Photoshop CS6標(biāo)準(zhǔn)培訓(xùn)教材[M].2013.第一版.人民郵電出版社.</p><p>　　[2] 黃谷來.2012天貓商家網(wǎng)絡(luò)營銷策略研究[J].華中師范大學(xué),</p><p>　　[3] 朱宇婷.極簡主義風(fēng)格的平面設(shè)計(jì)研究[M]. 201

30、2.第1版.安徽工程大學(xué)出版社</p><p>　　[4] 齊元.淘寶網(wǎng)Ivy皇冠店鋪的競爭戰(zhàn)略研究[J].華南理工大學(xué),2013學(xué),2012</p><p>　　[5] 管佳鶯.編排設(shè)計(jì)[M]. 2012.第1版.湖北美術(shù)出版社</p><p><b>　　作者介紹</b></p><p>　　學(xué)校：嘉興職業(yè)技術(shù)學(xué)院