網頁的設計與制作

吳振華

（赤峰學院 物理與電子信息工程系，內蒙古 赤峰 024000）

網頁的設計與制作

吳振華

（赤峰學院 物理與電子信息工程系，內蒙古 赤峰 024000）

本文是以指導“赤峰學院第四屆‘挑戰杯’大學生課外學術科技作品競賽”的網頁設計——物理與電子信息工程系網建站為例談談網頁設計的相關問題.首先說明了系網站的頁面設計與制作主題、站點的規劃以及網頁設計的風格，最后簡要地介紹所需工具、材料的收集和網頁的制作.在對學生的指導上重點突出設計思想和制作流程.本網站主要由物理系簡介、教學管理、專業簡介、課程簡介、精品課程、EDP考試、信息資源以及學生管理等欄目組成主頁.

頁面布局；站點規劃；網頁制作

對非計算機專業的學生，如何讓其在最短的時間內能夠掌握網頁設計制作技術，并能制作出好的參賽作品是問題的關鍵.根據學生的實際情況初步制定指導計劃：一是根據參賽作品的要求確定網頁制作的主題，以方便對素材的收集和準備工作；二是選擇網頁制作工具，確定指導學習的內容.最終目的是使學生在最短的時間內掌握網頁制作技術，并能做出高質量的作品參加競賽.

1 站點的規劃與設計

1.1 確定網頁設計制作的主題

確定網頁設計的主題是決定網頁設計活動最關鍵的一步.主題是否鮮明，不僅是參賽作品能否中成功的問題，更是網頁設計制作的一個非常重要的技術指標.由于作品確定以物理與電子信息工程系為網站作為主題，就要以專業設置，課程建設、教學管理等因素確定網頁設計及制作的類型.有了明確的主題，并要按照視覺心理規律和形式將主題傳達給評判人.這就要求網頁設計不但要簡練、清晰和精確，而且在強調藝術性的同時，更應該注重通過獨特的風格和強烈的視覺沖擊力，來鮮明地突出設計主題.

1.2 規劃站點的結構

根據參賽作品要求及素材的具體情況，決定采用樹形結構，如圖1所示，處于頂部的是站點的首頁，在首頁上鏈接若干個二級網頁，每個二級網頁鏈接若干三級網頁.

圖1 系站點結構

1.3 確定網頁的風格

在網頁設計過程中包含著主觀和客觀兩方面的因素.在確立了網頁主題和結構之后，就要在顏色搭配、頁面布局和內容結構進行風格設計.網頁風格的設計雖然沒有統一的標準，但一定要符合人們的心里感受，要么給人生動活潑、要么給人雅致整潔、要么給人寧重嚴肅.成功的網頁設計給人們留下的都是難忘的記憶.只有形成了自己風格的網頁，才能有無限的生命力.

顏色搭配是網頁風格設計的關鍵.當我們距離顯示器較遠時候，看到的不是網頁優美的版面或者是美麗和圖片，而是網頁的色彩.網頁色彩搭配設計包括背景色彩、色調的選擇和文字、圖片色彩的選擇.我們知道：白紙黑字是永遠的主題，誰都說不出不好來.而網頁最常用流行色是：

·蘭色——藍天白云，沉靜整潔的顏色.

·綠色——綠白相間，雅致而有生氣.

·橙色——活潑熱烈，標準商業色調.

·暗紅——寧重、嚴肅、高貴，需要配黑和灰來壓制刺激的紅色.

幾種固定搭配是：

·藍白橙——藍為主調.白底，藍標題欄，橙色按鈕或ICON做點綴.

·綠白蘭——綠為主調.白底，綠標題欄，蘭色或橙色按鈕或ICON做點綴.

·橙白紅——橙為主調.白底，橙標題欄，暗紅或桔紅色按鈕或ICON做點綴.

·暗紅黑——暗紅主調.黑或灰底，暗紅標題欄，文字內容背景為淺灰色.

在具體的設計制作中，主頁采用了深藍、淺藍和白色幾種顏色的搭配，其它頁面根據內容的需要進行了亮色與暗色近似色的搭配，并且在一個頁面里都控制在3-4種色彩內.

頁面布局設計 頁面布局類型有不同的分類方法，有的將網頁布局分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等；還有的將網頁布局分為骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型等；不管那類分法都可以簡單地概括為：

（1）最上面是網站的標題以及橫幅廣告條，接下來就是導航鏈接，在下面就是網站的主要內容，左右分2欄、或3欄或4欄，最下面是網站的一些基本信息、聯系方式、版權聲明等.

（2）上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息.在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接.

（3）最上面是標題或類似的一些東西，下面是正文.

（4）左右或是上下為分兩部分，左面或上面是導航鏈接，有時最上面會有一個小的橫幅，右面或下面是正文.

（5）在網站的首頁，放置一些小的動畫或圖片，再配上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示的頁面.

（6）以上頁面結構的結合，做的無規律可循，相對復雜一些，大多和圖片結合進行的布局.

本例中，主頁采用了最上面是網站的標題，接下來是跑馬燈消息，導航鏈接，在下面就是網站的主要內容.左中右分3欄，左邊是最新消息滾動窗口，中間部分是系的主要內容，最右邊是圖片切換窗口.最下面是網站的版權聲明等.

內容結構設計 內容結構設計的比較簡單，頁面鏈接的層深為二級.并采用樹形結構，各欄目之間都能方便地跳轉.

在進行網頁風格設計時，需要注意：

·盡量使用網頁中的標準色彩.文字的鏈接色彩、圖片的主題色、背景色、邊框的色彩等都要使用標準色彩.

·網頁中要使用標準字體和字號.在所有的標題、文字、圖片里要使用統一的標準字體.

·在網頁中使用統一的圖片處理效果.

·網頁中盡量使用自己設計的花邊、圖案和按鈕，以突出網頁的特點.

2 工具的選用和介紹

2.1 網頁制作工具選用的是Adobe Dreamweaver CS軟件

Dreamweaver是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器.它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁.

它包含HomeSite和BBEdit等主流文字編輯器.幀（frames）和表格的制作速度快的令您無法想像.進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續之選取.甚至可以排序或格式化表格群組，Dreamweaver支援精準定位，利用可輕易轉換成表格的圖層以拖拉置放的方式進行版面配置.所見即所得Dreamweaver成功整合動態式出版視覺編輯及電子商務功能，提供超強的支援能力給Third-party 廠商，包含 ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango與自行發展的應用軟體.目前版本的Dreamweaver CS5最突出的亮點有三處：①對CMS的支持功能；②對CSS的校驗；③對PHP更好的支持.CS5還內置了Webkit引擎，可以模仿Safari、Chrome瀏覽器預覽網頁效果.

2.2 動畫制作工具選用的是Adobe Flash CS軟件

Flash是一種創作工具，設計人員和開發人員可使用它來創建演示文稿、應用程序和其它允許用戶交互的內容.Flash可以包含簡單的動畫、視頻內容、復雜演示文稿和應用程序以及介于它們之間的任何內容.通常，使用Flash創作的各個內容單元稱為應用程序，即使它們可能只是很簡單的動畫.您也可以通過添加圖片、聲音、視頻和特殊效果，構建包含豐富媒體的Flash應用程序.Flash特別適用于創建通過Internet提供的內容，因為它的文件非常小.Flash是通過廣泛使用矢量圖形做到這一點的.與位圖圖形相比，矢量圖形需要的內存和存儲空間小很多，因為它們是以數學公式而不是大型數據集來表示的.位圖圖形之所以更大，是因為圖像中的每個像素都需要一組單獨的數據來表示.

2.3 圖像處理工具選用的是Adobe Photoshop軟件

Photoshop：它是由Adobe公司開發的圖形處理系列軟件之一，主要應用于在圖像處理、廣告設計的一個電腦軟件.平面設計是Photoshop應用最為廣泛的領域，無論是我們正在閱讀的圖書封面，還是大街上看到的招帖、海報，這些具有豐富圖像的平面印刷品，基本上都需要Photoshop軟件對圖像進行處理.

3 網頁設計制作的過程

3.1 資料信息的收集

在確定主題、規劃站點結構和內容之后，還要收集相關的資料信息.資料信息是人類的科學文化知識、各種思想和各種實踐活動賴以記錄、保存、交流和傳播的一切印刷品和視聽材料的統稱.資料信息搜集是有一定技巧的.包括；規劃資料、具體搜索、編輯整理等.

將需要的資料信息搜集完成后，并不是可以直接應用在網頁設計中，因為這些資料往往是凌亂的、不系統的，還需要大量的編輯工作.首先要仔細分析資料信息，確定哪些需要、哪些不需要，哪些需要修改和整理.

本例網頁“物理與電子信息工程系”需要搜集準備的信息資料有以下幾種：

·“物理系概況”欄目方面的圖片及相關文字資料，可以到系辦去搜集.

·“教學管理”、“精品課程”等欄目的相關資料到系教務辦去搜集.

·“專業介紹”、“課程介紹”、“EDP 考試”、“信息資源”等欄目相關內容到系各教研室去搜集.

·“精彩瞬間”、“學生管理”等欄目的相關資料到系學生辦去搜集.

以上幾點都是實現網頁工程項目所需要的前期搜集準備工作，這是完成網頁設計不可缺少的一個步驟.

3.2 網頁的制作

首先用Photoshop圖形處理軟件來處理圖片，制作LOGO和超鏈接圖標；其次用Flash軟件制作所需的動畫；最后利用Dreamweaver軟件制作網頁.

本例中的網頁是用html語言編寫的一個關于“物理與電子信息工程系”的網站，htnl中文翻譯為“超文本標記語言”，所謂“超文本“就是指頁面內可以包含圖片，鏈接，多媒體等非問字的元素，通過html語言將這些元素表示出來，就形成了html代碼.

html的結構包括頭部head、主體body兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容.另外，html是網絡的通用語言一種簡單、通用的全置標記語言.它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器.其主要特點如下：

（1）簡易性，html版本升級采用超集方式，從而更加靈活方便.

（2）可擴展性，html語言的廣泛應用帶來了加強功能，增加標識符等要求，html采取子類元素的方式，為系統擴展帶來保證.

（3）平臺無關性.雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上.

部分頁面采用DIV+CSS進行頁面布局.DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，DIV+CSS是一種網頁的布局方法,這一種網頁布局方法有別于傳統的HTML網頁設計語言中的表格（table）定位方式,真正地達到了w3c內容與表現相分離.其優點在于：①使頁面載入得更快.②降低流量費用.③修改設計時更有效率.④保持視覺的一致性.⑤更好地被搜索引擎收錄.⑥對瀏覽者和瀏覽器更具親和力.我們都知道網站做出來是給瀏覽者使用的，對瀏覽者和瀏覽器更具親和力，DIV+CSS在這方面更具優勢.由于CSS富含豐富的樣式，使頁面更加靈活性，它可以根據不同的瀏覽器，而達到顯示效果的統一和不變形.

在“專業簡介”、“課程簡介”以及“精彩瞬間”還用到了iframe元素.iframe元素的功能是在一個html內嵌一個文檔，創建一個浮動的幀，可以嵌在網頁中的任意部分.Iframe雖然內嵌在另一個HTML文件中，但它保持相對的獨立，是一個“獨立王國”，在單一HTML中的特性同樣適用于浮動幀中.通過Iframe標記，我們可將那些不變的內容以Iframe來表示，這樣，不必重復寫相同的內容，這有點象程序設計中的過程或函數，減省了多少繁瑣的手工勞動.

3.3 網頁測試

在制作過程中隨時瀏覽每一張網頁，及時發現網頁中的錯誤，并改之.

本次參賽作品——網頁設計制作是靜態網頁.靜態網頁是相對于動態網頁而言.也就是以.htm、.html、.shtml、.xml等為后后綴的.在 html格式的網頁上，也可以出現動畫，滾動字母等.這些“動態效果”只是視覺上的，與動態網頁是不同的概念.

靜態網頁每個網頁都有一個固定的URL.且網頁htm、.html、.shtml等常見形式的后綴，網頁內容一經發布到網站服務器上，無論是否有用戶訪問，每個靜態網頁的內容都是保存在網站服務器上的，每個網頁都是一個獨立的文件.靜態網頁的內容相對穩定，因此容易被搜索引擎檢索靜態網頁沒有數據庫的支持，在網站制作和維護方面工作量較大，因此當網站信息量很大時完全依靠靜態網頁制作方式比較困難.靜態網頁的交互性交叉，在功能方面有較大的限制.盡管“靜態網頁”存在許多不足，但是初學者要學好網頁制作不妨從“靜態網頁”制作學起.

做好一個網頁不是一件容易的事，對個人的要求是全方位的，需要有扎實的知識和綜合素質，要有全身心投入到網頁世界的決心和勇氣，去不斷的學習，去不斷的探索；同時去不斷的充實，去不斷的完善自我.

TP391

A

1673-260X（2011）10-0037-03