手把手教你怎麼套模板製作網頁

圖書館學系網站的設計與製作

摘 要

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

關鍵詞：網頁設計；色彩；布局；課程學習

1引言

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

2網站的設計

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

2.1配色方案

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

2.1.1形成自己的網頁色彩風格

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

2.1.2網頁色彩與主題和諧統一

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

2.2圖像處理

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

圖 2

筆者設計的圖書館學系網站主要是依據本專業的現實情況而定，在對陝西師範大學秘書學系等網站進行了解後設立了主要的欄目，同時也是在力求界面簡潔的情況下為用戶提供高效的服務。

2.4布局及功能模塊

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

2.4.1網頁布局類型

網頁布局的類型主要有「國」字型布局，「廠」字型布局，「框架」型布局，封面型布局和flash型布局，筆者設計的網站主要採用的是「國」字型布局，因為「國」字型布局適合於比較正式的大中型網站，筆者設計的雖然是簡略版，但是主體的結構還是比較適合「國」字型布局的。

2.4.2網頁布局技術

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

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

3網站設計中存在的問題及應對策略

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

3.1網站設計時主題難以確定或不明確

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

3.2結構混亂

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

對於結構混亂的解決方法是在製作之前提前要有一個清晰而明確的構思，網站的導航欄目要緊扣主題，然後按照一定的標準進行分類。可見，在進行網頁設計結構的製作時核心就是要有一定的劃分標準，有了標準才能夠讓呈現給用戶的網頁是清晰，簡明的。

3.3出現死鏈接

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

4 結束語

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

參考文獻：

[1]秦盈瑩.網頁設計中的色彩探析[J],藝術研究,2008(4):55

[2]陳智蓋.新時期網頁設計中計算機圖像處理技術應用分析,[J],應用研發,2015（3）：219-220

[3]嚴加瓊.淺析網頁設計中的頁面布局,[J],電腦學習,2010(2):41-44

[4]鄧成洲.網頁設計實踐存在的問題及對策,[J],電腦知識與技術,2006(5):126-127

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！