網(wǎng)頁制作三劍客技術(shù)上的融合

張棟梁

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

關(guān)鍵詞：網(wǎng)頁制作;案例分析;網(wǎng)頁制作三劍客;結(jié)合

中圖分類號：G434? ? ? ? 文獻(xiàn)標(biāo)識碼：A

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

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

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

1 設(shè)計網(wǎng)頁（網(wǎng)站）效果圖-軟件Firework

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

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

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

2 制作網(wǎng)頁-軟件Dreamweaver

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

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

3 設(shè)計網(wǎng)頁動畫視頻（廣告Banner）-軟件Flash

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

4 結(jié)語

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

參考文獻(xiàn)：

[1]傳智播客高教產(chǎn)品研發(fā)部.網(wǎng)頁設(shè)計與制作（HTML+CSS） [M].中國鐵道出版社，2014（8）.

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

[3]李松勤.探討多媒體專業(yè)《網(wǎng)頁設(shè)計與制作技術(shù)》課程的教學(xué)改革 [J].科技經(jīng)濟市場，2014（11）：233.

[4]趙春燕.電子商務(wù)網(wǎng)站設(shè)計與制作? [M].北京大學(xué)出版社，2011（4）.

[5]李建忠，牟風(fēng)瑞，安剛.電子商務(wù)網(wǎng)站建設(shè)與維護(hù)[M].清華大學(xué)出版社，2013（10）.

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

[7]趙蕓.高校《網(wǎng)頁三劍客》教學(xué)設(shè)計[J].計算機與網(wǎng)絡(luò)，2009（7）：66～68.

【通聯(lián)編輯：王力】