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

張棟梁

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

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

中圖分類(lèi)號(hào)：G434? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）23-0173-02

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

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

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

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

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

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

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

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

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

3 設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)視頻（廣告Banner）-軟件Flash

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

4 結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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

[4]趙春燕.電子商務(wù)網(wǎng)站設(shè)計(jì)與制作? [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)頁(yè)制作案例教程[M].中國(guó)工信出版集團(tuán)，人民郵電出版社，2015（9）.

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

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