基于Dreamweaver的剪紙文化網(wǎng)設(shè)計(jì)

吳立志

摘要：本設(shè)計(jì)以Dreamweaver作為開發(fā)工具，設(shè)計(jì)并制作一個(gè)關(guān)于剪紙文化的網(wǎng)站，以方便更多的人了解剪紙文化。該網(wǎng)站是集有關(guān)剪紙的文本、圖片、視頻、音頻等于一體的綜合網(wǎng)站，系統(tǒng)地介紹剪紙文化，以剪紙圖片鑒賞為重點(diǎn)，旨在利用現(xiàn)代網(wǎng)絡(luò)技術(shù)來更好的闡述傳統(tǒng)文化。

關(guān)鍵詞：Dreamweaver;剪紙文化;網(wǎng)頁(yè)設(shè)計(jì)

剪紙是民間藝術(shù)的一種，是以紙為加工對(duì)象，以剪刀（或刻刀）為工具進(jìn)行創(chuàng)作的藝術(shù)，以鏤空藝術(shù)為主要的表現(xiàn)方式，在視覺上給人以透空的感覺和藝術(shù)享受。在古代裝飾紋樣上，曾牽動(dòng)和影響著我國(guó)歷代民間工藝的裝飾風(fēng)格，同時(shí)又是我國(guó)民間圖案的基本造型手段。今天，Interne飛速發(fā)展，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們的政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。傳統(tǒng)的文化也要隨著時(shí)代的步伐，煥發(fā)出新的活力。筆者所制作的剪紙文化網(wǎng)就是將傳統(tǒng)的剪紙藝術(shù)與現(xiàn)在的信息技術(shù)緊密聯(lián)系起來，通過現(xiàn)代網(wǎng)絡(luò)技術(shù)來更好的闡述傳統(tǒng)文化。剪紙文化網(wǎng)是一個(gè)系統(tǒng)介紹剪紙的網(wǎng)站，希望通過該網(wǎng)站，讓更多的人了解剪紙藝術(shù)，更好的了解中國(guó)的傳統(tǒng)文化。

1.剪紙文化網(wǎng)站的需求分析

剪紙作為中國(guó)的傳統(tǒng)文化，2006年5月20日，剪紙藝術(shù)經(jīng)國(guó)務(wù)院批準(zhǔn)被列入《第一批國(guó)家級(jí)非物質(zhì)文化遺產(chǎn)名錄》。但是通過便捷的網(wǎng)絡(luò)，我們可以知道在豐富的網(wǎng)絡(luò)資源中，系統(tǒng)介紹剪紙的網(wǎng)站并不是很多，其中有中國(guó)剪紙網(wǎng)（http：//www.sxpaper-cut.cn/）和中國(guó)剪紙網(wǎng)（http：//www.paper-cut.net/）等。以中國(guó)剪紙網(wǎng)（http：//www.sxpaper-cut.cn/）為例，首先，該網(wǎng)站以紅色為主色調(diào)，其中也有相近色，如橘紅色，粉紅色等，筆者認(rèn)為剪紙本就多為紅色，該網(wǎng)站在色彩搭配方面很值得借鑒;其次，該網(wǎng)站用表格來布局，有一點(diǎn)中規(guī)中矩的感覺，缺少應(yīng)有的活力;再次，由于該網(wǎng)站主要以商業(yè)為主，在展示剪紙作品的時(shí)候做的不夠好。因此，筆者在吸收其他相關(guān)網(wǎng)站的優(yōu)點(diǎn)的基礎(chǔ)上，以動(dòng)態(tài)圖片的鑒賞為重點(diǎn)，建立該網(wǎng)站，更好的宣傳剪紙藝術(shù)。

2.剪紙文化網(wǎng)站的開發(fā)軟件介紹

Dream?weaver是個(gè)原本由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。Dreamweaver可以用最快速的方式將Fireworks，或Photoshop等檔案移至網(wǎng)頁(yè)上，也可以使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)，并且Dreamweaver是唯一提供Roundtrip?HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具，它具有制作效率高，網(wǎng)站管理迅速以及控制能力強(qiáng)的優(yōu)點(diǎn)。如Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback?Flash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。

3.剪紙文化網(wǎng)頁(yè)設(shè)計(jì)與制作

3.1規(guī)劃結(jié)構(gòu)

網(wǎng)站規(guī)劃對(duì)網(wǎng)站建設(shè)起到計(jì)劃和指導(dǎo)的作用，對(duì)網(wǎng)站的內(nèi)容和維護(hù)起到定位作用。只有在制作網(wǎng)頁(yè)之前把這些都考慮到，才能制作出有個(gè)性、有特色、有吸引力的網(wǎng)頁(yè)。

規(guī)劃一個(gè)網(wǎng)站可以用樹狀結(jié)構(gòu)先把每個(gè)頁(yè)面的內(nèi)容大綱列出來。在剪紙文化網(wǎng)中，筆者設(shè)計(jì)了七大模塊，分別為首頁(yè)，簡(jiǎn)介，歷史，鑒賞，教程，小游戲，留言板。其中，在簡(jiǎn)介模塊中有介紹，剪紙?zhí)攸c(diǎn)，剪紙種類三部分;鑒賞模塊是我這個(gè)網(wǎng)站設(shè)計(jì)的重點(diǎn)，有花鳥，蝴蝶，魚和人物四組動(dòng)態(tài)效果，來展示精美的剪紙圖片。

利用Dreamweaver制作網(wǎng)頁(yè)，首先要規(guī)劃和創(chuàng)建站點(diǎn)，然后利用站點(diǎn)對(duì)文件進(jìn)行管理。所謂站點(diǎn)，可以看成是一系列文檔的組合，這些文檔通過各種鏈接建立邏輯關(guān)聯(lián)。用戶在建立網(wǎng)站首先要新建站點(diǎn)，然后在站點(diǎn)中對(duì)網(wǎng)頁(yè)文檔進(jìn)行修改與管理。

網(wǎng)站的目錄結(jié)構(gòu)是網(wǎng)站組織和存放站內(nèi)所以文檔的目錄設(shè)置情況。目錄結(jié)構(gòu)的好壞，直接影響站點(diǎn)的管理、維護(hù)、擴(kuò)充和移植。

3.2?LOGO與色彩

3.2.1設(shè)計(jì)網(wǎng)站LOGO

網(wǎng)站LOGO是網(wǎng)站的標(biāo)是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)。這個(gè)LOGO和剪紙文化網(wǎng)所要表現(xiàn)的內(nèi)涵相聯(lián)系，賦予傳統(tǒng)文化現(xiàn)代活力。

3.2.2設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩

標(biāo)準(zhǔn)色彩是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步，不同的色彩搭配會(huì)產(chǎn)生不同的效果，并可能影響到網(wǎng)頁(yè)瀏覽者的情緒。

3.3?布局

在剪紙文化網(wǎng)中，一般為左右布局，所用到的布局工具主要有表格和AP?Div，其中以CSS（Cascading?Style?Sheets，AP?Div疊樣式表單）+DIV（是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素）為主。3.4?動(dòng)態(tài)效果

動(dòng)態(tài)效果是剪紙網(wǎng)站設(shè)計(jì)的重點(diǎn)，主要由Flash按鈕，F(xiàn)lash文本，視頻，背景音樂以及AP?Div的行為組成，簡(jiǎn)單的動(dòng)態(tài)效果可以使網(wǎng)頁(yè)變的有聲有色，增強(qiáng)觀賞性。在剪紙文化網(wǎng)中，由于筆者大部分用的AP?Div來布局，可以方便的使用AP?Div添加行為。

3.5?交互

交互是參與活動(dòng)的對(duì)象，可以相互交流，雙方面進(jìn)行互動(dòng)。對(duì)于一個(gè)網(wǎng)站來說，交互是至關(guān)重要的。若一個(gè)網(wǎng)站不能與使用者互動(dòng)，不能及時(shí)了解瀏覽者的需求，則網(wǎng)站很難維持下去。在剪紙文化網(wǎng)中，筆者充分考慮了這個(gè)問題，不僅設(shè)計(jì)了電子郵件的交互，還能在線留言，并對(duì)網(wǎng)站的教程資源進(jìn)行下載方便用戶的應(yīng)用。

3.6測(cè)試

3.6.1鏈接的測(cè)試

在剪紙文化網(wǎng)中，筆者用到的鏈接樣式有錨點(diǎn)鏈接，空鏈接，電子郵件鏈接等內(nèi)部鏈接，在測(cè)試的過程中，所有的鏈接都能正常運(yùn)行。

3.6.2動(dòng)態(tài)效果的測(cè)試

在剪紙文化網(wǎng)中，由于動(dòng)態(tài)效果是筆者所要展示的重點(diǎn)，所以對(duì)動(dòng)態(tài)效果進(jìn)行測(cè)試是至關(guān)重要的環(huán)節(jié)。筆者大部分頁(yè)面是用AP?Div布局，因此大多的動(dòng)態(tài)效果是AP?Div的行為特效，另外還有Flash以及時(shí)間軸動(dòng)畫等，在對(duì)動(dòng)態(tài)效果的測(cè)試過程中，有些效果和設(shè)計(jì)有所偏差，但經(jīng)過修改，已經(jīng)達(dá)到了讓人滿意的水平。

3.6.3留言板測(cè)試

對(duì)留言板的返回首頁(yè)，我要留言，查看留言，管理登陸四個(gè)選項(xiàng)依次進(jìn)行了測(cè)試，除了上面提到的我要留言選項(xiàng)中輸入的必須是數(shù)字QQ號(hào)外，其他選項(xiàng)中的內(nèi)容也進(jìn)行了細(xì)致的測(cè)試，如管理登陸時(shí)若密碼輸入錯(cuò)誤，也會(huì)出現(xiàn)提醒等，對(duì)留言板的測(cè)試要在ISS環(huán)境下進(jìn)行，不管是留言，還是查看或者管理等都可正常運(yùn)行。