吳振華

（赤峰學(xué)院 物理與電子信息工程系，內(nèi)蒙古 赤峰 024000）

網(wǎng)頁(yè)的設(shè)計(jì)與制作

吳振華

（赤峰學(xué)院 物理與電子信息工程系，內(nèi)蒙古 赤峰 024000）

本文是以指導(dǎo)“赤峰學(xué)院第四屆‘挑戰(zhàn)杯’大學(xué)生課外學(xué)術(shù)科技作品競(jìng)賽”的網(wǎng)頁(yè)設(shè)計(jì)——物理與電子信息工程系網(wǎng)建站為例談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)的相關(guān)問題.首先說(shuō)明了系網(wǎng)站的頁(yè)面設(shè)計(jì)與制作主題、站點(diǎn)的規(guī)劃以及網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格，最后簡(jiǎn)要地介紹所需工具、材料的收集和網(wǎng)頁(yè)的制作.在對(duì)學(xué)生的指導(dǎo)上重點(diǎn)突出設(shè)計(jì)思想和制作流程.本網(wǎng)站主要由物理系簡(jiǎn)介、教學(xué)管理、專業(yè)簡(jiǎn)介、課程簡(jiǎn)介、精品課程、EDP考試、信息資源以及學(xué)生管理等欄目組成主頁(yè).

頁(yè)面布局；站點(diǎn)規(guī)劃；網(wǎng)頁(yè)制作

對(duì)非計(jì)算機(jī)專業(yè)的學(xué)生，如何讓其在最短的時(shí)間內(nèi)能夠掌握網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù)，并能制作出好的參賽作品是問題的關(guān)鍵.根據(jù)學(xué)生的實(shí)際情況初步制定指導(dǎo)計(jì)劃：一是根據(jù)參賽作品的要求確定網(wǎng)頁(yè)制作的主題，以方便對(duì)素材的收集和準(zhǔn)備工作；二是選擇網(wǎng)頁(yè)制作工具，確定指導(dǎo)學(xué)習(xí)的內(nèi)容.最終目的是使學(xué)生在最短的時(shí)間內(nèi)掌握網(wǎng)頁(yè)制作技術(shù)，并能做出高質(zhì)量的作品參加競(jìng)賽.

1 站點(diǎn)的規(guī)劃與設(shè)計(jì)

1.1 確定網(wǎng)頁(yè)設(shè)計(jì)制作的主題

確定網(wǎng)頁(yè)設(shè)計(jì)的主題是決定網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)最關(guān)鍵的一步.主題是否鮮明，不僅是參賽作品能否中成功的問題，更是網(wǎng)頁(yè)設(shè)計(jì)制作的一個(gè)非常重要的技術(shù)指標(biāo).由于作品確定以物理與電子信息工程系為網(wǎng)站作為主題，就要以專業(yè)設(shè)置，課程建設(shè)、教學(xué)管理等因素確定網(wǎng)頁(yè)設(shè)計(jì)及制作的類型.有了明確的主題，并要按照視覺心理規(guī)律和形式將主題傳達(dá)給評(píng)判人.這就要求網(wǎng)頁(yè)設(shè)計(jì)不但要簡(jiǎn)練、清晰和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)，更應(yīng)該注重通過(guò)獨(dú)特的風(fēng)格和強(qiáng)烈的視覺沖擊力，來(lái)鮮明地突出設(shè)計(jì)主題.

1.2 規(guī)劃站點(diǎn)的結(jié)構(gòu)

根據(jù)參賽作品要求及素材的具體情況，決定采用樹形結(jié)構(gòu)，如圖1所示，處于頂部的是站點(diǎn)的首頁(yè)，在首頁(yè)上鏈接若干個(gè)二級(jí)網(wǎng)頁(yè)，每個(gè)二級(jí)網(wǎng)頁(yè)鏈接若干三級(jí)網(wǎng)頁(yè).

圖1 系站點(diǎn)結(jié)構(gòu)

1.3 確定網(wǎng)頁(yè)的風(fēng)格

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中包含著主觀和客觀兩方面的因素.在確立了網(wǎng)頁(yè)主題和結(jié)構(gòu)之后，就要在顏色搭配、頁(yè)面布局和內(nèi)容結(jié)構(gòu)進(jìn)行風(fēng)格設(shè)計(jì).網(wǎng)頁(yè)風(fēng)格的設(shè)計(jì)雖然沒有統(tǒng)一的標(biāo)準(zhǔn)，但一定要符合人們的心里感受，要么給人生動(dòng)活潑、要么給人雅致整潔、要么給人寧重嚴(yán)肅.成功的網(wǎng)頁(yè)設(shè)計(jì)給人們留下的都是難忘的記憶.只有形成了自己風(fēng)格的網(wǎng)頁(yè)，才能有無(wú)限的生命力.

顏色搭配是網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的關(guān)鍵.當(dāng)我們距離顯示器較遠(yuǎn)時(shí)候，看到的不是網(wǎng)頁(yè)優(yōu)美的版面或者是美麗和圖片，而是網(wǎng)頁(yè)的色彩.網(wǎng)頁(yè)色彩搭配設(shè)計(jì)包括背景色彩、色調(diào)的選擇和文字、圖片色彩的選擇.我們知道：白紙黑字是永遠(yuǎn)的主題，誰(shuí)都說(shuō)不出不好來(lái).而網(wǎng)頁(yè)最常用流行色是：

·蘭色——藍(lán)天白云，沉靜整潔的顏色.

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

·橙色——活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào).

·暗紅——寧重、嚴(yán)肅、高貴，需要配黑和灰來(lái)壓制刺激的紅色.

幾種固定搭配是：

·藍(lán)白橙——藍(lán)為主調(diào).白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴.

·綠白蘭——綠為主調(diào).白底，綠標(biāo)題欄，蘭色或橙色按鈕或ICON做點(diǎn)綴.

·橙白紅——橙為主調(diào).白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴.

·暗紅黑——暗紅主調(diào).黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色.

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

頁(yè)面布局設(shè)計(jì) 頁(yè)面布局類型有不同的分類方法，有的將網(wǎng)頁(yè)布局分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等；還有的將網(wǎng)頁(yè)布局分為骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型等；不管那類分法都可以簡(jiǎn)單地概括為：

（1）最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是導(dǎo)航鏈接，在下面就是網(wǎng)站的主要內(nèi)容，左右分2欄、或3欄或4欄，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等.

（2）上面是標(biāo)題及廣告橫幅，接下來(lái)的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息.在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接.

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

（4）左右或是上下為分兩部分，左面或上面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的橫幅，右面或下面是正文.

（5）在網(wǎng)站的首頁(yè)，放置一些小的動(dòng)畫或圖片，再配上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁(yè)的圖片上做鏈接而沒有任何提示的頁(yè)面.

（6）以上頁(yè)面結(jié)構(gòu)的結(jié)合，做的無(wú)規(guī)律可循，相對(duì)復(fù)雜一些，大多和圖片結(jié)合進(jìn)行的布局.

本例中，主頁(yè)采用了最上面是網(wǎng)站的標(biāo)題，接下來(lái)是跑馬燈消息，導(dǎo)航鏈接，在下面就是網(wǎng)站的主要內(nèi)容.左中右分3欄，左邊是最新消息滾動(dòng)窗口，中間部分是系的主要內(nèi)容，最右邊是圖片切換窗口.最下面是網(wǎng)站的版權(quán)聲明等.

內(nèi)容結(jié)構(gòu)設(shè)計(jì) 內(nèi)容結(jié)構(gòu)設(shè)計(jì)的比較簡(jiǎn)單，頁(yè)面鏈接的層深為二級(jí).并采用樹形結(jié)構(gòu)，各欄目之間都能方便地跳轉(zhuǎn).

在進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)時(shí)，需要注意：

·盡量使用網(wǎng)頁(yè)中的標(biāo)準(zhǔn)色彩.文字的鏈接色彩、圖片的主題色、背景色、邊框的色彩等都要使用標(biāo)準(zhǔn)色彩.

·網(wǎng)頁(yè)中要使用標(biāo)準(zhǔn)字體和字號(hào).在所有的標(biāo)題、文字、圖片里要使用統(tǒng)一的標(biāo)準(zhǔn)字體.

·在網(wǎng)頁(yè)中使用統(tǒng)一的圖片處理效果.

·網(wǎng)頁(yè)中盡量使用自己設(shè)計(jì)的花邊、圖案和按鈕，以突出網(wǎng)頁(yè)的特點(diǎn).

2 工具的選用和介紹

2.1 網(wǎng)頁(yè)制作工具選用的是Adobe Dreamweaver CS軟件

Dreamweaver是美國(guó)MACROMEDIA公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器.它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè).

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

2.2 動(dòng)畫制作工具選用的是Adobe Flash CS軟件

Flash是一種創(chuàng)作工具，設(shè)計(jì)人員和開發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容.Flash可以包含簡(jiǎn)單的動(dòng)畫、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容.通常，使用Flash創(chuàng)作的各個(gè)內(nèi)容單元稱為應(yīng)用程序，即使它們可能只是很簡(jiǎn)單的動(dòng)畫.您也可以通過(guò)添加圖片、聲音、視頻和特殊效果，構(gòu)建包含豐富媒體的Flash應(yīng)用程序.Flash特別適用于創(chuàng)建通過(guò)Internet提供的內(nèi)容，因?yàn)樗奈募浅Ｐ?Flash是通過(guò)廣泛使用矢量圖形做到這一點(diǎn)的.與位圖圖形相比，矢量圖形需要的內(nèi)存和存儲(chǔ)空間小很多，因?yàn)樗鼈兪且詳?shù)學(xué)公式而不是大型數(shù)據(jù)集來(lái)表示的.位圖圖形之所以更大，是因?yàn)閳D像中的每個(gè)像素都需要一組單獨(dú)的數(shù)據(jù)來(lái)表示.

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

Photoshop：它是由Adobe公司開發(fā)的圖形處理系列軟件之一，主要應(yīng)用于在圖像處理、廣告設(shè)計(jì)的一個(gè)電腦軟件.平面設(shè)計(jì)是Photoshop應(yīng)用最為廣泛的領(lǐng)域，無(wú)論是我們正在閱讀的圖書封面，還是大街上看到的招帖、海報(bào)，這些具有豐富圖像的平面印刷品，基本上都需要Photoshop軟件對(duì)圖像進(jìn)行處理.

3 網(wǎng)頁(yè)設(shè)計(jì)制作的過(guò)程

3.1 資料信息的收集

在確定主題、規(guī)劃站點(diǎn)結(jié)構(gòu)和內(nèi)容之后，還要收集相關(guān)的資料信息.資料信息是人類的科學(xué)文化知識(shí)、各種思想和各種實(shí)踐活動(dòng)賴以記錄、保存、交流和傳播的一切印刷品和視聽材料的統(tǒng)稱.資料信息搜集是有一定技巧的.包括；規(guī)劃資料、具體搜索、編輯整理等.

將需要的資料信息搜集完成后，并不是可以直接應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中，因?yàn)檫@些資料往往是凌亂的、不系統(tǒng)的，還需要大量的編輯工作.首先要仔細(xì)分析資料信息，確定哪些需要、哪些不需要，哪些需要修改和整理.

本例網(wǎng)頁(yè)“物理與電子信息工程系”需要搜集準(zhǔn)備的信息資料有以下幾種：

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

·“教學(xué)管理”、“精品課程”等欄目的相關(guān)資料到系教務(wù)辦去搜集.

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

·“精彩瞬間”、“學(xué)生管理”等欄目的相關(guān)資料到系學(xué)生辦去搜集.

以上幾點(diǎn)都是實(shí)現(xiàn)網(wǎng)頁(yè)工程項(xiàng)目所需要的前期搜集準(zhǔn)備工作，這是完成網(wǎng)頁(yè)設(shè)計(jì)不可缺少的一個(gè)步驟.

3.2 網(wǎng)頁(yè)的制作

首先用Photoshop圖形處理軟件來(lái)處理圖片，制作LOGO和超鏈接圖標(biāo)；其次用Flash軟件制作所需的動(dòng)畫；最后利用Dreamweaver軟件制作網(wǎng)頁(yè).

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

html的結(jié)構(gòu)包括頭部head、主體body兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容.另外，html是網(wǎng)絡(luò)的通用語(yǔ)言一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言.它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器.其主要特點(diǎn)如下：

（1）簡(jiǎn)易性，html版本升級(jí)采用超集方式，從而更加靈活方便.

（2）可擴(kuò)展性，html語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，html采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證.

（3）平臺(tái)無(wú)關(guān)性.雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上.

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

在“專業(yè)簡(jiǎn)介”、“課程簡(jiǎn)介”以及“精彩瞬間”還用到了iframe元素.iframe元素的功能是在一個(gè)html內(nèi)嵌一個(gè)文檔，創(chuàng)建一個(gè)浮動(dòng)的幀，可以嵌在網(wǎng)頁(yè)中的任意部分.Iframe雖然內(nèi)嵌在另一個(gè)HTML文件中，但它保持相對(duì)的獨(dú)立，是一個(gè)“獨(dú)立王國(guó)”，在單一HTML中的特性同樣適用于浮動(dòng)幀中.通過(guò)Iframe標(biāo)記，我們可將那些不變的內(nèi)容以Iframe來(lái)表示，這樣，不必重復(fù)寫相同的內(nèi)容，這有點(diǎn)象程序設(shè)計(jì)中的過(guò)程或函數(shù)，減省了多少繁瑣的手工勞動(dòng).

3.3 網(wǎng)頁(yè)測(cè)試

在制作過(guò)程中隨時(shí)瀏覽每一張網(wǎng)頁(yè)，及時(shí)發(fā)現(xiàn)網(wǎng)頁(yè)中的錯(cuò)誤，并改之.

本次參賽作品——網(wǎng)頁(yè)設(shè)計(jì)制作是靜態(tài)網(wǎng)頁(yè).靜態(tài)網(wǎng)頁(yè)是相對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)而言.也就是以.htm、.html、.shtml、.xml等為后后綴的.在 html格式的網(wǎng)頁(yè)上，也可以出現(xiàn)動(dòng)畫，滾動(dòng)字母等.這些“動(dòng)態(tài)效果”只是視覺上的，與動(dòng)態(tài)網(wǎng)頁(yè)是不同的概念.

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

做好一個(gè)網(wǎng)頁(yè)不是一件容易的事，對(duì)個(gè)人的要求是全方位的，需要有扎實(shí)的知識(shí)和綜合素質(zhì)，要有全身心投入到網(wǎng)頁(yè)世界的決心和勇氣，去不斷的學(xué)習(xí)，去不斷的探索；同時(shí)去不斷的充實(shí)，去不斷的完善自我.

TP391

A

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