《網頁設計與制作》課程教學探究

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

山西青年 2021年3期

鄭曉利

（西安培華學院，陜西西安 710125）

一、引言

近年來，隨著計算機技術的發展，毋庸置疑互聯網已然成為人們獲取信息的重要來源，網頁也成為信息傳播的重要途徑之一。因此在現在的高等教育中，《網頁設計與制作》已經不再僅僅是計算機相關專業的專屬課程，同時也是很多專業的必修課，比如說數字媒體技術專業、網絡與新媒體專業、電子商務專業等。那么對于傳媒類的學生來說，網絡信息的搜集、處理及發布是基本技能，而網頁設計與制作是信息發布的基礎［1］。

網頁與網站密不可分，網站屬于互聯網上用于展示特定內容的相關的網頁的集合，而網頁是網站當中的一頁，那么一個網站當中的網頁是通過超鏈接的方式被組織在一起的。

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

《網頁設計與制作》這門課程涉及網頁制作過程中的3項關鍵的技術，包括HTML、CSS、JavaScript，所以它與計算機密切相關，涉及計算機編程，另外專業名詞、語法較多，比較復雜，特別是對于非計算機專業的學生來說，可能平時接觸這個方面會比較少一些，所以學習理解起來也會一定的困難［3］。由于課程的目的就是要制作出來實實在在的網頁，所以這門課程具有很強的實踐性，編程在所難免。很多學生一聽到編程就很容易產生膽怯的心理，因此通過課程教學去引導尤為重要。

二、網頁設計

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

從整個網站開發的流程來看，我們可以知道網頁設計對于網站開發至關重要。比如說通過設計效果圖，我們能夠更快更好的展示網頁最終的效果，以及分析網頁結構布局是否合理，那么用戶通過效果圖也能夠直觀地看到與理想效果的偏差，從而反饋給開發者。通過效果圖的最終確認就可以更好地把控網頁最終要實現的目標。這樣就可以大大減小網頁制作的工作量。

有時候為了看到整個網站的雛形，我們還可以通過一些軟件設計出整個網站系統的原型，通過產品原型，我們不僅能夠直觀地觀察各個網頁的效果，而且能夠發現網頁之間的超鏈接跳轉及聯系，實現交互式的效果。

（一）效果圖設計

在網頁制作之前，我們首先要分析網頁要展示的內容以及實現的功能，明確網頁的目標和需求，完成網頁的構思，最好制作出網頁效果圖。制作效果圖最常用的軟件就是photoshop。

明確了目標之后，我們首先圍繞目標收集素材，比如說文字、圖像、動畫、音視頻等等。然后進行網頁規劃，比如說網頁的結構、顏色搭配、頁面排版布局等，從而對網站的整體風格做出定位，規劃網頁結構。最后我們就可以著手效果圖的設計了，比如我們可以選擇photoshop軟件，基于實現目標與網頁規劃繪制出來一個網頁的效果圖。

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

（二）原型設計

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

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

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

三、網頁制作

（一）明確主題

一般情況下，在課程設計中，我們都是選定一個主題來制作網頁，那么圍繞這個主題，學生就可以發揮自己的想象來設計效果圖了。對于傳媒專業的學生而言，他們已經有了一些軟件的基礎，比如說photoshop、AI等軟件在其他的課程中有過介紹，所以在這個方面它們有一定的優勢，通過適當的引導可以激發他們學習的興趣。

在選擇主題的時候，老師可以適當地融入思政元素。通過選擇合適的主題來激發學生的學習興趣，比如讓學生設計并制作紅色景點旅游的網頁，學生在掌握專業知識的同時，還能夠去深入了解、挖掘歷史，感受中華文化與深厚的人文底蘊，汲取優秀的傳統文化內涵，促進中華文化傳承發展。再比如詩詞鑒賞網頁的主題，學生在完成項目的過程中，必然會去查找、學習古詩詞，這樣不僅可以提高他們的文學素養和表達能力，弘揚中華優秀傳統文化，而且可以讓學生更好掌握專業知識。因此根據課程性質和教學目標適當的融入諸如團隊意識、創新精神、珍惜時間、社會主義核心價值觀之類的思政元素，從而讓學生在以后的學習工作中能夠更好地傳播、傳遞正能量。

（二）制作技巧

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

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

標簽將整個網頁劃分為5個部分，接下來就從上往下針對不同的部分來分別完成編碼。比如對于其中一部分包含左側的圖片和右側的文字，這個時候我們就能對應到具體的代碼上，標簽來表示圖片，段落

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

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

四、總結

《網頁設計與制作》這門課程具有較強的實踐性，能夠將所學的知識轉化為實實在在的成果，學生往往感覺很有成就感，能夠大大激發他們學習的積極性［4］。我們通過理論講解、案例、項目實踐的方式讓學生對網頁設計與制作的過程及涉及的關鍵技術逐步深入，并在此基礎上對案例進行升級、擴展，層層深入，師生互動，讓每個學生都參與、都動手操作，將知識用于實踐，并及時總結和引申來激發學生的探索和創新意識。從而讓學生愛上學習，愛上網頁設計與制作，變“要我學”為“我要學”！

猜你喜歡

頁面課程設計

大狗熊在睡覺

大灰狼畫報·益智版(2024年3期)2024-12-09 00:00:00

刷新生活的頁面

保健醫苑(2022年1期)2022-08-30 08:39:14

數字圖像處理課程混合式教學改革與探索

內蒙古教育(2021年20期)2021-03-08 01:09:14

軟件設計與開發實踐課程探索與實踐

計算機教育(2020年5期)2020-07-24 08:53:38

為什么要學習HAA課程？

家庭影院技術(2019年11期)2019-12-09 09:14:30