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

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

2、計算機應用技術142班</p><p><b>　　指導教師：金志鵬</b></p><p>　　2016年 12 月31 日</p><p><b>　　目 錄</b></p><p><b>　　摘要1</b></p><p><b>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、氣又專業(yè)，白色的晨光劃破了天際，令人眼前一亮，印象深刻！使用主色調深藍色，再加上蒼勁有力的毛筆字體書上公司名字。海報的左上角加上公司的網(wǎng)址?？蛻魰涀」镜拿帧Ｈ鐖D4-1所示。</p><p>　　第二張Banner：在黑色的背景上放了產(chǎn)品圖，經(jīng)過處理的專業(yè)的產(chǎn)品處理后，為了突出公司產(chǎn)品。因為文案雖然重要，但是圖片比起文字是更加直觀，更能留下深刻印象的。公司主營玻璃閥門，塑料閥門等。選擇的是銷量最好的轉化率最好

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

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

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

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

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

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

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

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

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

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

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

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

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