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

摘 要

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

---

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

1引言

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

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

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

2.1配色方案

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

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

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

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

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

2.2圖像處理

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

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

2.4布局及功能模塊

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

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

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

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

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

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

---

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

對(duì)于筆者這種網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者來(lái)說(shuō)，在網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐過(guò)程中暴露出了大量的問(wèn)題。

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

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

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

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

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

3.3出現(xiàn)死鏈接

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

---

4 結(jié)束語(yǔ)

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

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

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

廣告

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