吳立志
摘要:本設計以Dreamweaver作為開發工具,設計并制作一個關于剪紙文化的網站,以方便更多的人了解剪紙文化。該網站是集有關剪紙的文本、圖片、視頻、音頻等于一體的綜合網站,系統地介紹剪紙文化,以剪紙圖片鑒賞為重點,旨在利用現代網絡技術來更好的闡述傳統文化。
關鍵詞:Dreamweaver;剪紙文化;網頁設計
剪紙是民間藝術的一種,是以紙為加工對象,以剪刀(或刻刀)為工具進行創作的藝術,以鏤空藝術為主要的表現方式,在視覺上給人以透空的感覺和藝術享受。在古代裝飾紋樣上,曾牽動和影響著我國歷代民間工藝的裝飾風格,同時又是我國民間圖案的基本造型手段。今天,Interne飛速發展,互聯網已成為人們快速獲取、發布和傳遞信息的重要渠道,它在人們的政治、經濟、生活等各個方面發揮著重要的作用。傳統的文化也要隨著時代的步伐,煥發出新的活力。筆者所制作的剪紙文化網就是將傳統的剪紙藝術與現在的信息技術緊密聯系起來,通過現代網絡技術來更好的闡述傳統文化。剪紙文化網是一個系統介紹剪紙的網站,希望通過該網站,讓更多的人了解剪紙藝術,更好的了解中國的傳統文化。
1.剪紙文化網站的需求分析
剪紙作為中國的傳統文化,2006年5月20日,剪紙藝術經國務院批準被列入《第一批國家級非物質文化遺產名錄》。但是通過便捷的網絡,我們可以知道在豐富的網絡資源中,系統介紹剪紙的網站并不是很多,其中有中國剪紙網(http://www.sxpaper-cut.cn/)和中國剪紙網(http://www.paper-cut.net/)等。以中國剪紙網(http://www.sxpaper-cut.cn/)為例,首先,該網站以紅色為主色調,其中也有相近色,如橘紅色,粉紅色等,筆者認為剪紙本就多為紅色,該網站在色彩搭配方面很值得借鑒;其次,該網站用表格來布局,有一點中規中矩的感覺,缺少應有的活力;再次,由于該網站主要以商業為主,在展示剪紙作品的時候做的不夠好。因此,筆者在吸收其他相關網站的優點的基礎上,以動態圖片的鑒賞為重點,建立該網站,更好的宣傳剪紙藝術。
2.剪紙文化網站的開發軟件介紹
Dream?weaver是個原本由Macromedia公司所開發的著名網站開發工具。它使用所見即所得的接口,亦有HTML編輯的功能。Dreamweaver可以用最快速的方式將Fireworks,或Photoshop等檔案移至網頁上,也可以使用網站地圖可以快速制作網站雛形、設計、更新和重組網頁,并且Dreamweaver是唯一提供Roundtrip?HTML、視覺化編輯與原始碼編輯同步的設計工具,它具有制作效率高,網站管理迅速以及控制能力強的優點。如Dreamweaver可以用最快速的方式將Fireworks,FreeHand,或Photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對于選單,快捷鍵與格式控制,都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設計工具,如Playback?Flash,Shockwave和外掛模組等搭配,不需離開Dreamweaver便可完成,整體運用流程自然順暢。除此之外,只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳化。
3.剪紙文化網頁設計與制作
3.1規劃結構
網站規劃對網站建設起到計劃和指導的作用,對網站的內容和維護起到定位作用。只有在制作網頁之前把這些都考慮到,才能制作出有個性、有特色、有吸引力的網頁。
規劃一個網站可以用樹狀結構先把每個頁面的內容大綱列出來。在剪紙文化網中,筆者設計了七大模塊,分別為首頁,簡介,歷史,鑒賞,教程,小游戲,留言板。其中,在簡介模塊中有介紹,剪紙特點,剪紙種類三部分;鑒賞模塊是我這個網站設計的重點,有花鳥,蝴蝶,魚和人物四組動態效果,來展示精美的剪紙圖片。
利用Dreamweaver制作網頁,首先要規劃和創建站點,然后利用站點對文件進行管理。所謂站點,可以看成是一系列文檔的組合,這些文檔通過各種鏈接建立邏輯關聯。用戶在建立網站首先要新建站點,然后在站點中對網頁文檔進行修改與管理。
網站的目錄結構是網站組織和存放站內所以文檔的目錄設置情況。目錄結構的好壞,直接影響站點的管理、維護、擴充和移植。
3.2?LOGO與色彩
3.2.1設計網站LOGO
網站LOGO是網站的標是站點特色和內涵的集中體現。這個LOGO和剪紙文化網所要表現的內涵相聯系,賦予傳統文化現代活力。
3.2.2設計網站的標準色彩
標準色彩是指能體現網站形象和延伸內涵的色彩。確定網站的標準色彩是相當重要的一步,不同的色彩搭配會產生不同的效果,并可能影響到網頁瀏覽者的情緒。
3.3?布局
在剪紙文化網中,一般為左右布局,所用到的布局工具主要有表格和AP?Div,其中以CSS(Cascading?Style?Sheets,AP?Div疊樣式表單)+DIV(是用來為HTML文檔內大塊(block-level)的內容提供結構和背景的元素)為主。3.4?動態效果
動態效果是剪紙網站設計的重點,主要由Flash按鈕,Flash文本,視頻,背景音樂以及AP?Div的行為組成,簡單的動態效果可以使網頁變的有聲有色,增強觀賞性。在剪紙文化網中,由于筆者大部分用的AP?Div來布局,可以方便的使用AP?Div添加行為。
3.5?交互
交互是參與活動的對象,可以相互交流,雙方面進行互動。對于一個網站來說,交互是至關重要的。若一個網站不能與使用者互動,不能及時了解瀏覽者的需求,則網站很難維持下去。在剪紙文化網中,筆者充分考慮了這個問題,不僅設計了電子郵件的交互,還能在線留言,并對網站的教程資源進行下載方便用戶的應用。
3.6測試
3.6.1鏈接的測試
在剪紙文化網中,筆者用到的鏈接樣式有錨點鏈接,空鏈接,電子郵件鏈接等內部鏈接,在測試的過程中,所有的鏈接都能正常運行。
3.6.2動態效果的測試
在剪紙文化網中,由于動態效果是筆者所要展示的重點,所以對動態效果進行測試是至關重要的環節。筆者大部分頁面是用AP?Div布局,因此大多的動態效果是AP?Div的行為特效,另外還有Flash以及時間軸動畫等,在對動態效果的測試過程中,有些效果和設計有所偏差,但經過修改,已經達到了讓人滿意的水平。
3.6.3留言板測試
對留言板的返回首頁,我要留言,查看留言,管理登陸四個選項依次進行了測試,除了上面提到的我要留言選項中輸入的必須是數字QQ號外,其他選項中的內容也進行了細致的測試,如管理登陸時若密碼輸入錯誤,也會出現提醒等,對留言板的測試要在ISS環境下進行,不管是留言,還是查看或者管理等都可正常運行。