網頁制作三劍客技術上的融合

張棟梁

摘要：網絡信息化的快速發展，要求相關專業的學生了解網絡、網站的一些基礎知識。網頁制作課程不僅是計算機專業的一門必修課程，在其他相關的專業也設置了本課程，其主要目標是使學生了解網站的構造與相關的基礎知識。網頁的制作不僅僅是單個軟件可以完成的，需要多種不同用處的軟件共同配合才能達到理想的效果，才能在美化與優化效果上與時俱進，吸引與留住有此需求的客戶。本文結合電子商務專業特點，通過案例分析闡述網頁制作過程中“網頁制作三劍客”之間的結合。

關鍵詞：網頁制作;案例分析;網頁制作三劍客;結合

中圖分類號：G434? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）23-0173-02

開放科學（資源服務）標識碼（OSID）：

“網頁制作”課程實踐性很強，通過案例分析，項目化任務教學法，促使學生不斷地在項目實踐中掌握網頁的基礎標簽、屬性、結構，進而達到熟練掌握基礎知識的程度。同時通過模仿成熟網頁，借鑒優質網頁的設計理念、思維，從而形成個人的設計理念與思維方式。網頁設計課程介紹中較為流行“網頁制作三劍客”，即Dreamweaver、Firework、Flash。主要講解如何應用“網頁制作三劍客”設計和創建網站，美化與優化網頁，使其可以在日新月異，不計其數的網站海洋里，吸引到需求的客戶。網頁制作不僅僅是單個軟件可以完成的，需要多種不同的軟件共同配合才能達到理想的效果。就目前市場情景，小型企業占比數據龐大，為減少成本企業分工沒有細致化，這就要求企業里的程序員需要具備多面手，即會編程，也會美工，還會排版、攝影等，因此多種不同軟件相互之間的結合使用是程序員必備的要求。對網頁制作者來說，網頁三劍客的相互結合更是必然要求。

1 設計網頁（網站）效果圖-軟件Firework

圖像處理軟件有很多，其中最為常用的是Photoshop，簡稱Ps。Photoshop目前是最為流行、功能最為強大的圖像處理軟件，可以作為提供網頁素材的輔助工具，圖像處理工具。然而網頁整體的設計仍然需要使用firework軟件，Firework軟件最為顯著的功能是矢量圖的繪制及切片的使用。

Firework軟件的第一個主要功能是設計網頁效果圖。將firework軟件作為一個平臺，一個整合平臺，里面包括網頁的所需資源，即網頁圖片，視頻，文本，導航等，最終在此平臺將這些處理過的素材整合成客戶需要的樣式，即客戶要求的網站效果圖。將設計好的效果圖發給客戶，爭取客戶的意見，根據客戶的二次要求進行再次修改，經過多次的溝通與完善最終完成效果設計圖。

Firework軟件的第二個主要功能是切片。首先通過切片工具可以查看圖像信息，以此數據創建網頁結構。其次通過切片工具將所需圖片切割導出，形成一個個獨立的小素材圖像，為網頁制作中提供所需素材。以下是本文章提供的實例網站的效果設計圖：

2 制作網頁-軟件Dreamweaver

目前國內制作網站的小公司較多，公司的規模決定了分工的細致化，對小公司來說網站制作流程的分工還沒有達到細致化，網頁制作涉及編程、設計，攝影，排版，動畫等操作知識。要求程序員對圖像處理，動畫制作軟件的基本操作要熟悉，這就要求多種軟件之間的相互結合使用的頻率會增加。網頁制作主要使用軟件Dreamweaver，輔助軟件firework，flash，三種軟件完美配合，即網頁制作三劍客的結合使用對網頁制作者來說是必然的、得心應手的。

Firework軟件設計的效果圖，Dreamweaver平臺作為參考進行編輯，網頁制作流程中firework是前提，是參考點。Dreamweaver平臺在編輯網頁過程中首先注重網頁結構，本文章中提供的實例網站的結構概括為上中下模式。在編輯網頁過程中，結構與樣式表的編輯是一一同步進行的，邊編輯邊進行調試，結合其他軟件處理好的素材，整個網頁就這么完美地呈現出來。

3 設計網頁動畫視頻（廣告Banner）-軟件Flash

Flash軟件的突出功能矢量圖繪制二維的小容量動畫視頻，對于網站上的廣告是完美選擇。通過Firework與Dreamweaver的操作學習，學生可以掌握如何規劃設計并建立網頁，制作出精美的網站。網站外掛或者內嵌動畫廣告是目前網站流行形式，這就要求掌握flash軟件的操作，解決市場上網站動畫需求。當前網站上動畫廣告一般為手繪動畫或圖片切換模式動畫，或者二者結合效果，這些動畫效果只需掌握flash軟件的一些基礎知識與操作即可實現?；趂lash軟件的一些重要優點：生成的動畫是矢量圖動畫，清晰，容量小，方便網絡傳輸，對網速的影響比較低，此軟件備受網頁制作者喜歡。

4 結語

網頁制作初學者在選擇平臺時，網頁三劍客是首選。然而專業計算機的學生，與電子商務專業的學生，在學習網頁制作的課程上，講授的難易程度是教師考慮的首要問題。Firework軟件、flash軟件對學生們來說是比較容易接受的，通過實例講解，學生跟做，下發任務，學生獨立完成，項目任務驅動法在這兩種軟件上最能立竿見影。Dreamweaver軟件是靜態網頁制作的主要平臺，涉及代碼編寫，然而目前軟件提供了很多的界面輸入，盡量減少了直接輸入代碼的難度與枯燥，對初學者來說這種方式更合適，對非計算機專業的學生來說，窗口界面的輸入減小了對代碼編輯難度。通過大量作品的操練使學生逐漸熟悉、掌握代碼，最終可以套用、借用優秀網頁實現個人的作品。網頁制作的熟練過程是一個需要學習與模仿，借鑒，項目鍛煉的過程，利用 “網頁制作三劍客”的強大的功能足可以制作出精美的網站。同時在授課中，結合學生的自身情況，對三劍客進行順序上的精細安排，案例上的細心篩選，最終達到優質教學目標的實現。

參考文獻：

[1]傳智播客高教產品研發部.網頁設計與制作（HTML+CSS） [M].中國鐵道出版社，2014（8）.

[2]田華，郝鳳枝，王朋嬌.基于 BOPPPS 模式的有效的教學設計—— 以《多媒體網頁設計》課程為例[J].教育現代化，2017，4（36）：224-227.

[3]李松勤.探討多媒體專業《網頁設計與制作技術》課程的教學改革 [J].科技經濟市場，2014（11）：233.

[4]趙春燕.電子商務網站設計與制作? [M].北京大學出版社，2011（4）.

[5]李建忠，牟風瑞，安剛.電子商務網站建設與維護[M].清華大學出版社，2013（10）.

[6]傳智播客高教產品研發部.HTML+CSS+JavaScript 網頁制作案例教程[M].中國工信出版集團，人民郵電出版社，2015（9）.

[7]趙蕓.高校《網頁三劍客》教學設計[J].計算機與網絡，2009（7）：66～68.

【通聯編輯：王力】