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

摘 要

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

---

關(guān)鍵詞：網(wǎng)頁設(shè)計；色彩；布局；課程學(xué)習(xí)

1引言

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

2網(wǎng)站的設(shè)計

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

2.1配色方案

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

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

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

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

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

2.2圖像處理

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

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

2.4布局及功能模塊

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

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

網(wǎng)頁布局的類型主要有“國”字型布局，“廠”字型布局，“框架”型布局，封面型布局和flash型布局，筆者設(shè)計的網(wǎng)站主要采用的是“國”字型布局，因?yàn)椤皣弊中筒季诌m合于比較正式的大中型網(wǎng)站，筆者設(shè)計的雖然是簡略版，但是主體的結(jié)構(gòu)還是比較適合“國”字型布局的。

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

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

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

---

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

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

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

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

3.2結(jié)構(gòu)混亂

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

對于結(jié)構(gòu)混亂的解決方法是在制作之前提前要有一個清晰而明確的構(gòu)思，網(wǎng)站的導(dǎo)航欄目要緊扣主題，然后按照一定的標(biāo)準(zhǔn)進(jìn)行分類。可見，在進(jìn)行網(wǎng)頁設(shè)計結(jié)構(gòu)的制作時核心就是要有一定的劃分標(biāo)準(zhǔn)，有了標(biāo)準(zhǔn)才能夠讓呈現(xiàn)給用戶的網(wǎng)頁是清晰，簡明的。

3.3出現(xiàn)死鏈接

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

---

4 結(jié)束語

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

本文標(biāo)題：淺談網(wǎng)站的設(shè)計與制作
轉(zhuǎn)載來于：http://www.bm7419.com/news36/102936.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站改版、自適應(yīng)網(wǎng)站、網(wǎng)站營銷、App開發(fā)、標(biāo)簽優(yōu)化

廣告

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