淺談網(wǎng)站的設計與制作

摘 要

在當今社會，互聯(lián)網(wǎng)是一個龐大的體系，而網(wǎng)頁是互聯(lián)網(wǎng)依稀的基本單元，怎樣將網(wǎng)頁設計的更漂亮，使網(wǎng)頁更具有藝術性，我們不僅要考慮網(wǎng)頁的色彩、樣式和效果，還要考慮網(wǎng)頁的主題、結構和布局。本文以筆者對于圖書館學系網(wǎng)站的設計與制作為例，對于網(wǎng)站制作的各方面進行綜合的分析。

---

關鍵詞：網(wǎng)頁設計；色彩；布局；課程學習

1引言

伴隨當今計算機網(wǎng)絡技術的不斷深入發(fā)展，信息化對于社會的影響越來越明顯。網(wǎng)站是一個匯聚信息的平臺，為瀏覽者提供可以篩選的信息。一個網(wǎng)站的建立需要有其特定的主題方向，滿足一定客戶人群的需求，并能夠通過實時的更新來使網(wǎng)站發(fā)展具備更持久的生命力。通過對于本學期網(wǎng)頁設計課程的學習與實踐，本文以圖書館學系網(wǎng)站的設計與制作為例，從網(wǎng)站建設的諸多方面作論述。

2網(wǎng)站的設計

網(wǎng)站前期的設計是在網(wǎng)站制作的過程中非常重要的因素，但是同時也是網(wǎng)站建設者最容易忽略的因素。筆者在圖書館學系網(wǎng)站的設計中主要考慮到以下幾個問題。

2.1配色方案

網(wǎng)頁色彩的設計并不是隨心而欲的，網(wǎng)頁設計者必須以基本的藝術規(guī)律為前提，綜合考慮網(wǎng)站本身的特點，既要各個部分整體協(xié)調(diào)，又要形成一定的局部對比，如此才能設計出獨具特色的網(wǎng)頁效果。[1]筆者在圖書館學系網(wǎng)站的網(wǎng)頁色彩搭配上主要依據(jù)了以下兩個原則。

2.1.1形成自己的網(wǎng)頁色彩風格

擁有自己的色彩風格才能夠給用戶留下深刻的印象，從而讓在五花八門的網(wǎng)站中脫穎而出。因此筆者在設計圖書館學系網(wǎng)站的色彩搭配時竭力追求的風格是簡約，整個網(wǎng)站的色彩相對來說比較單一，但是筆者在制作時刻意在局部小范圍的插入和白色對比比較強烈的藍色，既達到整體的和諧，又能夠突出局部的藝術效果。

2.1.2網(wǎng)頁色彩與主題和諧統(tǒng)一

不同的色彩帶來人的視覺感受不同，所產(chǎn)生的情感體驗也不同。另外，網(wǎng)頁色彩與主題和諧統(tǒng)一有助于網(wǎng)站理念的表達，筆者在圖書館學系網(wǎng)站的色彩構建中所要表達的主題是簡約和正式。由于冷色調(diào)的網(wǎng)頁主要能夠凸顯出寧靜與莊嚴的主題，因此筆者在圖書館學系網(wǎng)站的構建中采用的主色調(diào)是白色和藍色。

2.2圖像處理

網(wǎng)頁設計中圖像占據(jù)著非常重要的位置，其主要目的是吸引瀏覽者，引起他們對于網(wǎng)站的注意，這也是在整個網(wǎng)頁設計的風格和模式確定中最主要的部分，在網(wǎng)頁中圖像的主要功能就是吸引瀏覽者的眼球，通過圖像來進行信息引導。[2]筆者在進行圖像處理時主要考慮到以下幾個部分。首先是整個網(wǎng)站的logo，在網(wǎng)站中網(wǎng)頁logo基本決定著網(wǎng)站的點擊瀏覽率，筆者制作的圖書館學系網(wǎng)站的logo是由河北大學的?；蘸蛨D書館系組成，?；諡樗{色，字體顏色也為藍色，二者拼接在一起，可以很好的代表河北大學圖書館學系的品牌。其次是網(wǎng)頁的背景圖，筆者建設的網(wǎng)站的背景圖使用的是一幅竹林的圖片，圖片上有兩列字分別為：“筆耕傳薪火，實干創(chuàng)未來”。對于學院類網(wǎng)站，此圖和文字的結合既可以突出主題，又可以帶有感染力。另外，在圖像處理技巧上，筆者制作的網(wǎng)頁采用的是大圖和小圖相結合的方式，使用主頁面大圖突出網(wǎng)頁的內(nèi)涵，使用小圖使網(wǎng)頁更具有個性化。

筆者設計的圖書館學系網(wǎng)站主要是依據(jù)本專業(yè)的現(xiàn)實情況而定，在對陜西師范大學秘書學系等網(wǎng)站進行了解后設立了主要的欄目，同時也是在力求界面簡潔的情況下為用戶提供高效的服務。

2.4布局及功能模塊

隨著網(wǎng)頁制作技術和瀏覽者需求的提高，訪問者不再愿意看到只注重內(nèi)容的網(wǎng)站，設計者只有將網(wǎng)頁內(nèi)容和色彩通過合理布局、協(xié)調(diào)搭配，將網(wǎng)頁中具有閃光性的內(nèi)容加以強化，這樣既可以將設計者的思路淋漓盡致的表達出來，同時也可以留住太過挑剔的訪問者。[3]

2.4.1網(wǎng)頁布局類型

網(wǎng)頁布局的類型主要有“國”字型布局，“廠”字型布局，“框架”型布局，封面型布局和flash型布局，筆者設計的網(wǎng)站主要采用的是“國”字型布局，因為“國”字型布局適合于比較正式的大中型網(wǎng)站，筆者設計的雖然是簡略版，但是主體的結構還是比較適合“國”字型布局的。

2.4.2網(wǎng)頁布局技術

筆者在制作圖書館學系網(wǎng)站時使用的布局工具是Dreamweaver，在使用Dreamweaver設計網(wǎng)頁時,一般用于頁面布局技術的有表格布局，框架布局和CSS+DIV布局，筆者的圖書館學系網(wǎng)站小部分采用的就是CSS+DIV布局，DIV用于搭建網(wǎng)站結構（框架），CSS用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。其優(yōu)勢主要體現(xiàn)在：表現(xiàn)和內(nèi)容相分離，將設計部分剝離出來放在一個獨立樣式文件夾之中，HTML文件只存放文本信息·，大大提高頁面瀏覽速度。此外還有易于維護等優(yōu)勢。

雖然CSS+DIV功能強大，但是設計起來過于費時費力，對于筆者這種初學者來說，需要一個更加深入學習的過程，才能夠靈活的掌握。因此對于筆者來說使用table+css才是一種比較好的組合，css修飾頁面效果，table快捷布局。對于構建筆者設計的圖書館學系網(wǎng)站來說是一個比較快捷和方便的方法。因此筆者大部分網(wǎng)頁采用的就是table+css的方法。

---

3網(wǎng)站設計中存在的問題及應對策略

對于筆者這種網(wǎng)頁設計的初學者來說，在網(wǎng)頁設計實踐過程中暴露出了大量的問題。

3.1網(wǎng)站設計時主題難以確定或不明確

內(nèi)容是網(wǎng)頁的核心，是網(wǎng)頁生命力所在[4]。筆者在網(wǎng)站設計時思考了多種主題，但大都由于種種原因不得不放棄，最終確定主題以后在制作過程中由于不明確要為用戶提供什么樣的服務，以及網(wǎng)頁中要出現(xiàn)什么樣的內(nèi)容，總是做了修改，修改過推掉重新修改。在進行多次修改之后，筆者終于找到了解決的方法，那就是設計的網(wǎng)站不求大而全，而求小而精，而且最好是自己感興趣的內(nèi)容。

3.2結構混亂

筆者在設計導航條的過程中也是反復的修改，反復的推倒重做，原因是筆者總是覺得網(wǎng)站的結構不清晰。筆者犯這種錯誤的原因是確定題材以后馬上開始制作，但是當一頁頁的制作完成后才發(fā)現(xiàn)自己的結構是混亂的，因此又要花費大力氣進行修改。

對于結構混亂的解決方法是在制作之前提前要有一個清晰而明確的構思，網(wǎng)站的導航欄目要緊扣主題，然后按照一定的標準進行分類?？梢姡谶M行網(wǎng)頁設計結構的制作時核心就是要有一定的劃分標準，有了標準才能夠讓呈現(xiàn)給用戶的網(wǎng)頁是清晰，簡明的。

3.3出現(xiàn)死鏈接

筆者在圖書館學系網(wǎng)站的制作過程中最經(jīng)常犯的錯誤就是出現(xiàn)死鏈接，即鏈接打不開。出現(xiàn)這種情況的原因是筆者自己的疏忽大意，比如總是將相對鏈接和絕對鏈接弄混，不注意自己的書寫習慣，出現(xiàn)錯誤的路徑等。這種問題的解決措施無疑就是要改正自身出現(xiàn)的問題，在平常制作網(wǎng)頁的過程中謹慎仔細。

---

4 結束語

隨著網(wǎng)絡的飛速發(fā)展和網(wǎng)頁設計技術的不斷提高，無疑對網(wǎng)頁設計者提出了更高的要求，筆者在經(jīng)過一學期的網(wǎng)頁設計課程學習后，深深感受到網(wǎng)頁設計這門科目的精深，其知識之多，之雜，遠遠不是一個學期的學習就能夠掌握的。因此在以后的學習和生活中要加強自主學習的能力，提高自己在網(wǎng)頁設計方面的技術水平。同時也在網(wǎng)頁設計的過程中提升自己的審美能力和藝術素養(yǎng)。

標題名稱：淺談網(wǎng)站的設計與制作
網(wǎng)頁URL：http://www.bm7419.com/news/102936.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、網(wǎng)站建設、動態(tài)網(wǎng)站、虛擬主機、響應式網(wǎng)站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)