《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)探究

2021-11-27 10:38:57鄭曉利

山西青年 2021年3期

鄭曉利

（西安培華學(xué)院，陜西西安 710125）

一、引言

近年來，隨著計(jì)算機(jī)技術(shù)的發(fā)展，毋庸置疑互聯(lián)網(wǎng)已然成為人們獲取信息的重要來源，網(wǎng)頁也成為信息傳播的重要途徑之一。因此在現(xiàn)在的高等教育中，《網(wǎng)頁設(shè)計(jì)與制作》已經(jīng)不再僅僅是計(jì)算機(jī)相關(guān)專業(yè)的專屬課程，同時(shí)也是很多專業(yè)的必修課，比如說數(shù)字媒體技術(shù)專業(yè)、網(wǎng)絡(luò)與新媒體專業(yè)、電子商務(wù)專業(yè)等。那么對(duì)于傳媒類的學(xué)生來說，網(wǎng)絡(luò)信息的搜集、處理及發(fā)布是基本技能，而網(wǎng)頁設(shè)計(jì)與制作是信息發(fā)布的基礎(chǔ)［1］。

網(wǎng)頁與網(wǎng)站密不可分，網(wǎng)站屬于互聯(lián)網(wǎng)上用于展示特定內(nèi)容的相關(guān)的網(wǎng)頁的集合，而網(wǎng)頁是網(wǎng)站當(dāng)中的一頁，那么一個(gè)網(wǎng)站當(dāng)中的網(wǎng)頁是通過超鏈接的方式被組織在一起的。

網(wǎng)頁作為網(wǎng)站中用于承載信息的頁面，它的設(shè)計(jì)與制作對(duì)于網(wǎng)站來說至關(guān)重要［2］。比如說網(wǎng)站的首頁，它承載了一個(gè)網(wǎng)站中最重要的內(nèi)容展示。首頁作為網(wǎng)站的門面，是給予用戶第一印象的核心頁面，也是品牌形象呈現(xiàn)的窗口。網(wǎng)頁設(shè)計(jì)與制作，顧名思義，我們可以分為兩個(gè)步驟：先設(shè)計(jì)，再制作。那么前期需要對(duì)市場(chǎng)情況進(jìn)行調(diào)研、對(duì)用戶的需求進(jìn)行分析等等。在綜合分析的基礎(chǔ)上，首先對(duì)網(wǎng)頁進(jìn)行設(shè)計(jì)，制作出網(wǎng)頁的效果圖，甚至可以演示交互的網(wǎng)站原型，然后根據(jù)用戶的反饋，對(duì)效果圖或者網(wǎng)站原型進(jìn)行調(diào)整。然后以效果圖或者網(wǎng)站原型為基準(zhǔn)，制作出美觀實(shí)用的網(wǎng)頁。

《網(wǎng)頁設(shè)計(jì)與制作》這門課程涉及網(wǎng)頁制作過程中的3項(xiàng)關(guān)鍵的技術(shù)，包括HTML、CSS、JavaScript，所以它與計(jì)算機(jī)密切相關(guān)，涉及計(jì)算機(jī)編程，另外專業(yè)名詞、語法較多，比較復(fù)雜，特別是對(duì)于非計(jì)算機(jī)專業(yè)的學(xué)生來說，可能平時(shí)接觸這個(gè)方面會(huì)比較少一些，所以學(xué)習(xí)理解起來也會(huì)一定的困難［3］。由于課程的目的就是要制作出來實(shí)實(shí)在在的網(wǎng)頁，所以這門課程具有很強(qiáng)的實(shí)踐性，編程在所難免。很多學(xué)生一聽到編程就很容易產(chǎn)生膽怯的心理，因此通過課程教學(xué)去引導(dǎo)尤為重要。

二、網(wǎng)頁設(shè)計(jì)

隨著web技術(shù)的發(fā)展，網(wǎng)站開發(fā)被分成很多個(gè)部分，不同的人員來負(fù)責(zé)某一個(gè)部分。比如說網(wǎng)站架構(gòu)師，首先按照用戶的需求將網(wǎng)站的整個(gè)架構(gòu)設(shè)計(jì)出來，比如說網(wǎng)站要包括登錄頁面、首頁，網(wǎng)站根據(jù)功能可以劃分成很多版塊，不同版塊負(fù)責(zé)不同的功能，當(dāng)然每個(gè)版塊下面可能又包含一些網(wǎng)頁。這個(gè)就是網(wǎng)站架構(gòu)師的所負(fù)責(zé)的工作。那么有了網(wǎng)站的整體結(jié)構(gòu)之后，由網(wǎng)頁美工人員將每個(gè)頁面設(shè)計(jì)出來一個(gè)效果圖，那么這個(gè)效果圖就類似于我們要裝修，裝修公司會(huì)給我們出一個(gè)裝修的效果圖是一樣的道理。這個(gè)效果圖要得到用戶的確認(rèn)。那么施工人員才能按照效果圖的效果來進(jìn)行施工。那么對(duì)于網(wǎng)頁來說，當(dāng)美工人員出了效果圖之后，網(wǎng)頁制作人員將效果圖轉(zhuǎn)換成代碼，也就是通過編寫代碼的方式形成一個(gè)個(gè)的網(wǎng)頁文件，而這些網(wǎng)頁文件就是可以被瀏覽器解析和識(shí)別的網(wǎng)頁文件，這樣用戶可以通過瀏覽器瀏覽到整個(gè)網(wǎng)頁了。

從整個(gè)網(wǎng)站開發(fā)的流程來看，我們可以知道網(wǎng)頁設(shè)計(jì)對(duì)于網(wǎng)站開發(fā)至關(guān)重要。比如說通過設(shè)計(jì)效果圖，我們能夠更快更好的展示網(wǎng)頁最終的效果，以及分析網(wǎng)頁結(jié)構(gòu)布局是否合理，那么用戶通過效果圖也能夠直觀地看到與理想效果的偏差，從而反饋給開發(fā)者。通過效果圖的最終確認(rèn)就可以更好地把控網(wǎng)頁最終要實(shí)現(xiàn)的目標(biāo)。這樣就可以大大減小網(wǎng)頁制作的工作量。

有時(shí)候?yàn)榱丝吹秸麄€(gè)網(wǎng)站的雛形，我們還可以通過一些軟件設(shè)計(jì)出整個(gè)網(wǎng)站系統(tǒng)的原型，通過產(chǎn)品原型，我們不僅能夠直觀地觀察各個(gè)網(wǎng)頁的效果，而且能夠發(fā)現(xiàn)網(wǎng)頁之間的超鏈接跳轉(zhuǎn)及聯(lián)系，實(shí)現(xiàn)交互式的效果。

（一）效果圖設(shè)計(jì)

在網(wǎng)頁制作之前，我們首先要分析網(wǎng)頁要展示的內(nèi)容以及實(shí)現(xiàn)的功能，明確網(wǎng)頁的目標(biāo)和需求，完成網(wǎng)頁的構(gòu)思，最好制作出網(wǎng)頁效果圖。制作效果圖最常用的軟件就是photoshop。

明確了目標(biāo)之后，我們首先圍繞目標(biāo)收集素材，比如說文字、圖像、動(dòng)畫、音視頻等等。然后進(jìn)行網(wǎng)頁規(guī)劃，比如說網(wǎng)頁的結(jié)構(gòu)、顏色搭配、頁面排版布局等，從而對(duì)網(wǎng)站的整體風(fēng)格做出定位，規(guī)劃網(wǎng)頁結(jié)構(gòu)。最后我們就可以著手效果圖的設(shè)計(jì)了，比如我們可以選擇photoshop軟件，基于實(shí)現(xiàn)目標(biāo)與網(wǎng)頁規(guī)劃繪制出來一個(gè)網(wǎng)頁的效果圖。

對(duì)于效果圖的設(shè)計(jì)，要求設(shè)計(jì)人員掌握一些色彩的基本知識(shí)以及網(wǎng)頁色彩搭配的原理。比如網(wǎng)頁色彩搭配中，要善用單色、對(duì)比色、鄰近色和同類色；網(wǎng)頁要有與眾不同的色彩，不同類型的網(wǎng)站配以不同的色彩，從而表達(dá)不同的情感訴求；色彩要和網(wǎng)站的內(nèi)容、文化氛圍相符合，以便更好地突出網(wǎng)站的特色；網(wǎng)站配色的時(shí)候，盡量將顏色控制在三種以內(nèi)，以免產(chǎn)生網(wǎng)頁凌亂的感覺。另外網(wǎng)頁的設(shè)計(jì)也要適應(yīng)大眾審美、緊跟現(xiàn)代設(shè)計(jì)潮流，比如當(dāng)前比較流行的扁平化設(shè)計(jì)、全屏網(wǎng)頁設(shè)計(jì)等。

（二）原型設(shè)計(jì)

網(wǎng)站與網(wǎng)頁密不可分，如果我們要設(shè)計(jì)一個(gè)網(wǎng)站的話，那么我們不得不考慮各個(gè)網(wǎng)頁之間的聯(lián)系以及它的運(yùn)作流程。實(shí)際上絕大多數(shù)的客戶本身并不懂得設(shè)計(jì)知識(shí)，也不懂得編程知識(shí)，那么如果我們想要與用戶實(shí)現(xiàn)快速高效的溝通，就必須設(shè)計(jì)出一個(gè)網(wǎng)站的雛形，這就是原型。

原型可以展示出網(wǎng)站框架或者說是模型，讓他們明白外觀和運(yùn)作的機(jī)制，一個(gè)可交互的原型基本上能夠像最終完成的產(chǎn)品那樣運(yùn)行。你可以對(duì)它進(jìn)行操作，原型會(huì)給予相應(yīng)的反饋，使用者可以隨之明白它的運(yùn)作方式。實(shí)際上原型會(huì)讓開發(fā)更加容易，當(dāng)網(wǎng)頁設(shè)計(jì)師搞定一個(gè)行得通的原型之后，開發(fā)人員能夠在此基礎(chǔ)上拿出更加完善的代碼實(shí)現(xiàn)方案。當(dāng)設(shè)計(jì)和開發(fā)流程中有了原型之后，將會(huì)節(jié)省很多時(shí)間，降低成本。

下面介紹兩款用于制作原型的軟件，第一款軟件是AxureRP，它能讓你快速創(chuàng)建應(yīng)用軟件和基于Web的流程圖、原型頁面、交互頁面等，是一款功能十分強(qiáng)大且容易上手的軟件。第二款軟件是墨刀，它的功能比較簡潔、上手簡單，制作快速、瀏覽文件比較方便，主要定位是App原型的快速設(shè)計(jì)。

三、網(wǎng)頁制作

（一）明確主題

一般情況下，在課程設(shè)計(jì)中，我們都是選定一個(gè)主題來制作網(wǎng)頁，那么圍繞這個(gè)主題，學(xué)生就可以發(fā)揮自己的想象來設(shè)計(jì)效果圖了。對(duì)于傳媒專業(yè)的學(xué)生而言，他們已經(jīng)有了一些軟件的基礎(chǔ)，比如說photoshop、AI等軟件在其他的課程中有過介紹，所以在這個(gè)方面它們有一定的優(yōu)勢(shì)，通過適當(dāng)?shù)囊龑?dǎo)可以激發(fā)他們學(xué)習(xí)的興趣。

在選擇主題的時(shí)候，老師可以適當(dāng)?shù)厝谌胨颊亍Ｍㄟ^選擇合適的主題來激發(fā)學(xué)生的學(xué)習(xí)興趣，比如讓學(xué)生設(shè)計(jì)并制作紅色景點(diǎn)旅游的網(wǎng)頁，學(xué)生在掌握專業(yè)知識(shí)的同時(shí)，還能夠去深入了解、挖掘歷史，感受中華文化與深厚的人文底蘊(yùn)，汲取優(yōu)秀的傳統(tǒng)文化內(nèi)涵，促進(jìn)中華文化傳承發(fā)展。再比如詩詞鑒賞網(wǎng)頁的主題，學(xué)生在完成項(xiàng)目的過程中，必然會(huì)去查找、學(xué)習(xí)古詩詞，這樣不僅可以提高他們的文學(xué)素養(yǎng)和表達(dá)能力，弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，而且可以讓學(xué)生更好掌握專業(yè)知識(shí)。因此根據(jù)課程性質(zhì)和教學(xué)目標(biāo)適當(dāng)?shù)娜谌胫T如團(tuán)隊(duì)意識(shí)、創(chuàng)新精神、珍惜時(shí)間、社會(huì)主義核心價(jià)值觀之類的思政元素，從而讓學(xué)生在以后的學(xué)習(xí)工作中能夠更好地傳播、傳遞正能量。

（二）制作技巧

有了效果圖或者原型之后，我們就可以開始真正的網(wǎng)頁制作了，這個(gè)時(shí)候我們可以采用WBS任務(wù)分解的原則，通過分析效果圖將網(wǎng)頁劃分為若干個(gè)模塊，根據(jù)所學(xué)專業(yè)知識(shí)先將網(wǎng)頁的整個(gè)框架搭建出來，也就是將網(wǎng)頁劃分成若干個(gè)區(qū)域。然后我們逐個(gè)區(qū)域從上到下、從左往右來制作。對(duì)于比較復(fù)雜的區(qū)域內(nèi)容我們把它作為一個(gè)新的任務(wù)進(jìn)一步向下分解，直至所有的網(wǎng)頁內(nèi)容可以對(duì)應(yīng)到用所學(xué)知識(shí)來實(shí)現(xiàn)為止。

比如說通過分析網(wǎng)頁效果圖，網(wǎng)頁大致被分為5個(gè)模塊，那么我們就可以通過HTML中

標(biāo)簽將整個(gè)網(wǎng)頁劃分為5個(gè)部分，接下來就從上往下針對(duì)不同的部分來分別完成編碼。比如對(duì)于其中一部分包含左側(cè)的圖片和右側(cè)的文字，這個(gè)時(shí)候我們就能對(duì)應(yīng)到具體的代碼上，標(biāo)簽來表示圖片，段落

標(biāo)簽來表示文字，然后通過CSS我們可以控制圖片和文字的位置。那么每個(gè)部分都可以通過這樣的方式進(jìn)行分解、編碼完成。這樣我們通過將一個(gè)大任務(wù)逐層細(xì)化，分解成一些簡單的小任務(wù)，可以讓學(xué)生完成起來更容易。

在制作的過程中，學(xué)生必須要有一定的知識(shí)儲(chǔ)備。首先要求學(xué)生掌握一些常用的HTML標(biāo)簽，通過標(biāo)簽我們就可以將網(wǎng)頁的內(nèi)容書寫出來，然后通過CSS控制網(wǎng)頁布局以及樣式的設(shè)定，最后通過JavaScript實(shí)現(xiàn)網(wǎng)頁的交互。在制作的過程中，我們采用理論講解、演示結(jié)合實(shí)踐的方式，邊學(xué)邊做，將所學(xué)及時(shí)轉(zhuǎn)化為成果。并且一定要引導(dǎo)學(xué)生每完成一部分的代碼，都要用瀏覽器查看效果，這樣不僅可以幫助我們及時(shí)發(fā)現(xiàn)問題去解決，而且可以提升學(xué)生的自信心。如果堆積很多問題，這個(gè)時(shí)候解決起來就沒那么容易，學(xué)生看到自己做的網(wǎng)頁效果較差往往讓他們很有挫敗感，甚至有可能失去興趣、知難而退。

四、總結(jié)

《網(wǎng)頁設(shè)計(jì)與制作》這門課程具有較強(qiáng)的實(shí)踐性，能夠?qū)⑺鶎W(xué)的知識(shí)轉(zhuǎn)化為實(shí)實(shí)在在的成果，學(xué)生往往感覺很有成就感，能夠大大激發(fā)他們學(xué)習(xí)的積極性［4］。我們通過理論講解、案例、項(xiàng)目實(shí)踐的方式讓學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)與制作的過程及涉及的關(guān)鍵技術(shù)逐步深入，并在此基礎(chǔ)上對(duì)案例進(jìn)行升級(jí)、擴(kuò)展，層層深入，師生互動(dòng)，讓每個(gè)學(xué)生都參與、都動(dòng)手操作，將知識(shí)用于實(shí)踐，并及時(shí)總結(jié)和引申來激發(fā)學(xué)生的探索和創(chuàng)新意識(shí)。從而讓學(xué)生愛上學(xué)習(xí)，愛上網(wǎng)頁設(shè)計(jì)與制作，變“要我學(xué)”為“我要學(xué)”！